Jquery draggable and resizable containment

Question

I am trying to make a div both re-meaningful and draggable with jquery. However, the implementation seems rather crude.

I found several similar questions, but did not find a solution.

• In jQuery, how to fix a containment error while using resizable () and draggable () at the same time?
• Resizing a jQuery Draggable Parent Guardian while Dragging

I tried using several position configurations, and also tried the refreshPositions option, nothing worked.

The errors that I am experiencing are:

• When a child moves quickly (especially when moving in a circle), it often breaks and remains outside of containment.
• When you move the child to the lower right corner, and then, trying to pull the child out of the corner, dragging him several times, at each iteration the child again breaks the shell
• When the shell is broken, the next time you drag it, you can also drag it to this broken protection area

I rolled up an example.
This plays in all browsers, although the script seems to break in IE 10 and Opera.

 $(".child") .draggable({ containment: "parent", cursor: "move" }).resizable({ handles: "s,e", containment: "parent", minHeight: 50, minWidth: 50 }); 

See here for a complete but simple example.

http://jsfiddle.net/jxY8M/

How can I fix this deterrence problem?

Answer 1

This is a problem with the drag and drop of the user interface, the problem has already been reported here.

Corrections in your case (at least in the latest version of Chrome I'm working on) in

• Add parent 5px padding , demo found here
• Add parent 5px border , demo found here
• Add 5px margin to the child, a demo found here
• Mix any of the above to increase 5 pixels
• Add overflow:hidden to the parent demo found here . I have no idea why this works, but it seems to do the job perfectly.

The 5px threshold may only be relevant for an example, it may take some game to play the correct value in your actual case. Some other examples that I saw needed a smaller fill or border width, I believe this is based on how large the elements are somehow, but I'm not sure. I checked the fifth solution in my examples and it seemed to work there

Answer 2

You can try to use the stop function when dragging and dropping to change mutable parameters. This helped me when I had similar problems setting up containment for both mutable and drag-and-drop interactions.

Note: this works with a locked aspect ratio to a mutable interaction change.

Example:

 <div id="container" style="width: 320px; height: 240px; background-color: #000000;"> <div id="subject" style="width: 240px; height: 180px; background-color: #ffffff;"> </div> </div> <script type="text/javascript" language="javascript"> jQuery(document).ready(function() { jQuery("#subject").resizable( { aspectRatio: 4 / 3, minHeight: 120, minWidth: 160, maxHeight: 240, maxWidth: 320 }).draggable( { containment: "#container", stop: function(evt, ui) { var container = jQuery("#container"); var subject = jQuery("#subject"); var containerPosition = container.position(); var subjectPosition = subject.position(); var relativeLeft = subjectPosition.left - containerPosition.left; var relativeTop = subjectPosition.top - containerPosition.top; var maxWidth = (container.width() - relativeLeft) | 0; var maxHeight = (container.height() - relativeTop) | 0; subject.resizable("option", "maxWidth", maxWidth); subject.resizable("option", "maxHeight", maxHeight); } }); }); </script> 

Answer 3

In jQuery, how to fix a containment error while using resizable () and draggable () at the same time? closed but solution to this problem:

add position:relative to parent / container.

overflow:hidden didn't work for me (in Firefox, didn't check other browsers yet)