3

助けてください、緑のボックスを親にドラッグできるようにしたいのですが、親からオーバーフローする可能性があり、(緑のボックス) を線の上に移動またはドラッグすると非表示になります。誰かが私を助けることができますか？

Javascript:

$(document).ready(function() {
  $("#child").draggable({
    containment: 'parent'
  });
});

HTML:

<div id="parent">
    <div id="child"></div>
</div>

助けてください。たとえば、フィドルは次のとおりです。http://jsfiddle.net/vbJHJ/9/

http://api.jqueryui.com/draggable/を読みましたが、何も役に立ちません.. :(

4

2 に答える 2

2

あなたは物事を複雑にしすぎています。それにキスして。封じ込めを解除し、CSS オーバーフローを親に追加します。

JS:

$(document).ready(function() {
    $("#child").draggable();
});​

CSS:

#parent{
    width:300px; height: 300px; border: 1px solid #ccc; overflow: hidden;
}

#child{
    width: 50px; height: 50px; background: #00ff00;
}​

HTML:

<div id="parent">
    <div id="child">
    </div>
</div>

</p>

デモ

于 2012-12-13T10:17:09.290 に答える
0

史上最高の解決策： あなたは、ライン上に移動した場合に隠しボックスを作成したいと言ったので、これを使用して投票してください：

$(document).ready(function() {
$("#child").draggable({
drag : function() {
var bT = $("#parent").offset().top;
var bL = $("#parent").offset().left;
var bLL = bL+$("#parent").width()-$(this).width();
var bTT = bT+$("#parent").height()-$(this).height();
var m = $(this).offset();
if( m.top < bT || m.left < bL || m.left > bLL || m.top > bTT) {
$(this).css({ "opacity" : "0.1" });  
}
else {
$(this).css({ "opacity" : "1" });
}
}
});
});​
于 2012-12-13T10:27:02.487 に答える