Draggable JQuery UI - child div disappears

Question

When I drag my child div inside the parent div, it is disappearing when my mouse drags outside the boundaries. In the draggable Jquery documentation example, the child div cannot go beyond the boundaries of the parent container. Any thoughts on what my code is missing?

HTML markup:

<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 (I'm looking at the "I'm contained within my box" example)

• CodePen demo
• JSFiddle demo

Answer 1

Change this:

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

to this:

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