可拖动溢出

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>

​

演示

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