javascript - 可拖动的 JQuery UI - 子 div 消失

Question

当我将我的子 div 拖到父 div 中时，当我的鼠标拖到边界之外时它会消失。在可拖动的 Jquery 文档示例中，子 div 不能超出父容器的边界。对我的代码缺少什么有什么想法吗？

HTML 标记:

<div class="containment-wrapper">
<div class="boxone" class="draggable ui-widget-content">
</div>

<div class="boxtwo" class="draggable ui-widget-content">
</div>



<div class="boxthree">
</div>

</div>

JavaScript:

$(".boxtwo").draggable({ containment: "#containment-wrapper", scroll: false });

$(".boxthree").draggable({ containment: "#containment-wrapper", scroll: false});

http://jqueryui.com/draggable/#constrain-movement (我在看“我在我的盒子里”的例子)

• > CodePen demo
• > JSFiddle demo

Answer 1

改变这个:

$(".boxtwo").draggable({ containment: "#containment-wrapper", scroll: false });
$(".boxthree").draggable({ containment: "#containment-wrapper", scroll: false});

为此:

$(".boxtwo").draggable({ containment: "#containment-wrapper", scroll: false });
$(".boxthree").draggable({ containment: "parent", scroll: false});