Domanda

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)

È stato utile?

Soluzione

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});
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top