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>

Demo

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

可拖动溢出

2 个答案: