CODEWITHSUNDEEP
javascriptjquery-ui
epm
epm

Reputation: 101

Draggable JQuery UI - child div disappears

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)

Upvotes: 2

Views: 701

Answers (1)

Daniel Gasser
Daniel Gasser

Reputation: 5143

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

Upvotes: 1

Related Questions