Child nodes not go out of the parent div

Question

I have this div :

<div id="composition_area" style="width: 700px; height: 600px; float:left; border: solid 2px">
            <div id="a" class="a window" style="width: 80px; height: 80px; border: solid 1px" contenteditable="true">foo</div>
</div>

and inside of this with id="composition_area" I add nodes with the jsplumb . In this example I have a node with id="a" . All the nodes are draggable and the user can move the divs anywhere he wants. But I want not to go out of the parent div. How can I do that?

Answer 1

Look at the doc http://jsplumbtoolkit.com/doc/home#dragging

A common request is for the ability to contain the area within which an element may be dragged. For jQuery this is as simple as providing a containment parameter:

jsPlumb.draggable($("someSelector"), { containment:"parent" });

try this :

jsPlumb.draggable($("#composition_area"), {
  containment:"parent"
});