Refresh draggable containment

Question

Hi Guys

I have a draggable element that has containment set as parent. This works great but the div content can change making it taller. Is there anyway to trigger the drag event that will ensure it doesnt move from inside its parent. As right now it can overlap the parent until it is dragged then the containment kicks in.

Best Regards Mark

Answer 1

Does this work?

$("#yourcontainment").bind("resizestop", function () {
  $(".yourdraggables").draggable("option", "containment", $("#yourcontainment"));
});

You have to trigger the "resizestop" event if you do not use jQuery UI's resizable.

Answer 2

Because you are modifying the [contained] elements size, you must implement your own handler for the results. jQuery knows what to do during drag, but during a resize there are many possible behaviors:

• prevent resize of the contained
• element move the internal elements (which direction)
• delete elements

One can imagine a range of fictitious scenarios for different UI constraints.

Just create a PostionValidator() method for all objects of the contained class, and execute it after calling the modification method.