jquery - 可拖动溢出

Question

请帮忙，我想让那个绿色框可以拖到它的父级中，但它也可以从它的父级溢出，并且当它（绿色框）移动或拖过线时会被隐藏。有人能帮我吗？

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/但没有什么可以帮助我.. :(

Answer 1

你把事情复杂化了。亲吻它。取消遏制并将 ​​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>

演示

Answer 2

有史以来最好的解决方案： 你说如果移动到线上，你想制作隐藏的盒子，使用这个并投票：

$(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" });
}
}
});
});​