JQuery drag-and-drop wrapper using array does not work as expected

Question

I have this part of HTML

<div id="workflowEditor" class="workflow-editor"> <div class="node" class="ui-widget" style="top:20px; left:40px;"> <div class="ui-widget ui-widget-header ui-state-default">Header test</div> <div class="ui-widget ui-widget-content">Test Content</div> </div> </div> 

Using this CSS

 .workflow-editor { position: relative; overflow: auto; } .workflow-editor .node { position: absolute; min-width: 64px; min-height: 64px; } 

Than a challenge

 $(".node", "#workflowEditor").draggable({ containment: [0, 0, 500, 500] }); 

However, dragging and dropping this "node" allows dragging to negative values; draggable seems to use the coordinate of the browser viewport to bound the bounding box. Is there any way to say that the coordinates are relative to the draggable parent?

Note : the parent element may change over time.

** Edit **

the surface on which the dragged items are located refers to some other content. Like CSS, I need it to be overflow:scroll; therefore, if the objects being dragged are dragged outward, scroll bars are displayed. Parent size is fixed. The problem I am facing is that draggables can be dragged left (or top) to the surface (so I lose them). I would like to have a similar behavior like setting the containment to "parent" , but letting the overflow drag to the right / bottom side of the parent.

Answer 1

computing the boundaries of a node and its parent, check jsFiddle Link as explained in jQuery UI

 var containmentX1 = $(".node").parent().offset().left; var containmentY1 = $(".node").parent().offset().top; var containmentX2 = ($(".node").parent().outerWidth() + $(".node").parent().offset().left - $('.node').outerWidth()) var containmentY2 = ($(".node").parent().outerHeight() + $(".node").parent().offset().top - $('.node').outerHeight()) $(".node").draggable({ containment: [containmentX1, containmentY1, containmentX2, containmentY2] }); 

Answer 2

I had a similar problem - I needed to position the “boxes” inside the container, allowing them to overflow from the bottom or right, but not to the left or top. I also had to support changing the position of the container.

Unfortunately, I could not find an elegant solution. As you rightly noted, setting containment through an array of coordinates will determine the metrics associated with documents, so we must work with the position of the container relative to the document.

My little hack was to use the “document” in the container position for the upper and left limits (I used jQuery offset [1] and a large enough value for the right and lower limits. I used dragstart event [2] to read it again and reset the position in the container viewing window (which updated the containment window to the current container coordinates using the options method [3]).

 var $containerEl = $('#container'), $draggableEl = $('#my-draggable'); $draggableEl.on('dragstart', function (e) { $(e.target).draggable('option', 'containment', [ $containerEl.offset().left, $containerEl.offset().top, 15000, 15000 ]); }); $draggableEl.draggable({ containment: [ $containerEl.offset().left, $containerEl.offset().top, 15000, 15000 ] }); 

[1] http://api.jquery.com/offset/

[2] http://api.jqueryui.com/draggable/#event-start

[3] http://api.jqueryui.com/draggable/#method-option