JQuery UI draggable: Overcoming containment on one side

Question

I use the jQuery user interface to implement resizable / draggable elements. Now, I would like to define a restriction for these elements that restricts resizing / dragging to exactly three (!) Sides. For example. look at the JSFiddle example . You can see that the contained element can only be changed or changed in the parent area.

What I would like to achieve is that an element can exceed the lower threshold and move beyond the lower border of the parent. However, resizing / dragging should still be limited to the top, right, and left sides, as prescribed by the parent according to the boundaries.

So this modification is what I came up with:

// resizable/draggable option resize/drag : function(event, ui) { expandParent("#parentElement", "#dragElement"); } function expandParent(parentName, childName) { var dragEl = $(childName); var dragElTop = parseInt(dragEl.css("top"), 10); var dragElHeight = parseInt(dragEl.css("height"), 10); var dragElBottom = dragElTop + dragElHeight; var parentEl = $(parentName); var parentElBottom = parseInt(parentEl.css("height")); if(parentElBottom <= dragElBottom + 20) { parentEl.css("height", "+=2"); } } 

If you play with a lower border, you notice that the parent area expands if the child is too close to the lower border of the parent. Unfortunately, this stops after 20 pixels. Then you need to release the mouse button and resize / drag again to expand the area further. You do not know why this?

Answer 1

It is good that the expandParent function will not work, because the boundaries of the container were set using the JQuery UI, and it will not be updated until you release the mouse.

So, I can think of two solutions here, one is elegant and the other is complex

Obviously, an elegant solution would be to write your own inclusive method, which is at the bottom below.

But now I have a difficult solution using the dummy parent element and set its height to a large value, like 1000 or window height, and then set the hidden overflow attribute for the real parent.

Here is my solution:

 <div id="parentElement"> <div id="dummy-parent"> <div id="dragElement" class="dragClass"> <p>Drag me around!</p> </div> </div> </div> function expandParent(parentName, childName) { var dragEl = $(childName); var parentEl = $(parentName); var dragElHeight=dragEl.height(); if(parentEl.height() <= dragElHeight) { parentEl.height(dragElHeight); } } 

Check out the JS script

You need to change the code based on your application, I just gave you an idea

Answer 2

It seems that inside the jQuery user interface, they save the parent information at the beginning of the drag, so even if you change the size, it will still restrict the drag and drop.

To fix this, you can set your limiter.

 $("#dragElement") .draggable({ cursor : "move", scroll : false, containment : [20, 20, 400+20, 1000], drag : function(event, ui) { expandParent("#parentElement", "#dragElement"); } }) .resizable({ containment : "parent", resize : function(event, ui) { expandParent("#parentElement", "#dragElement"); } }); function expandParent(parentName, childName) { var dragEl = $(childName); var dragElTop = parseInt(dragEl.css("top"), 10); var dragElHeight = parseInt(dragEl.css("height"), 10); var dragElBottom = dragElTop + dragElHeight; var parentEl = $(parentName); var parentElBottom = parseInt(parentEl.css("height")); if(parentElBottom <= dragElBottom + 20) { parentEl.css("height", dragElBottom+20); } } 

With the above code, it will allow you to resize the parent to 1000 + 20 in height. You can try the above code here (JSFiddle) .

If you need to make a dynamic container, at the beginning (and in the resize method), install a new container with the correct BoundingBox.

 var p = $("#parentElement"); var dragWidth = parseInt($("#dragElement").css('width')); var left = p[0].offsetLeft; var top = p[0].offsetTop; var width = parseInt(p.css("width"), 10)-dragWidth; var containment = [left, top, width+left, 1000]; 

Yes, I know that the solution is kind of hacky .. but in any case, I just updated JSFiddle. This solution may not be for calculating and reinstalling the dynamic size of the container. I just wanted JSFiddle to work beautifully.

Answer 3

  $("#dragElement") .draggable({ cursor : "move", containment : '#Container', drag : function(event, ui) { var growAmount = 10; var cont = $('#Container'); var item = $(ui.helper); var itemOffset = item.offset(); itemOffset.bottom = itemOffset.top + dProps.item.height(); var contOffset= cont.offset(); contOffset.bottom = contOffset.top + cont.height(); if(itemOffset.bottom >= contOffset.bottom){ var inst = item.draggable("instance"); inst.containment = [inst.containment[0], inst.containment[1], inst.containment[2], inst.containment[3] + growAmount]; cont.height(parseInt(cont.height()) + growAmount); } } });