update containment bounds while dragging a UI draggable element

Question

I have a div where it can be resized and I'm not able to drag the draggable element it in the new bound. That is because the containment which is set at the time of adding the draggable element. Need to update the containment bound each time the element is dragged.

   <div class="parent">
      <div class="drag"></div>
   </div>

Jquery:

    $(".drag").draggable( {
                containment: ".parent",
                cursor: "move",
                stop: function ( event, ui ) {}
});

When I resize the parent div and drag the drag element after resize . I am not able to drag the element beyond the previous area. How do I update the containment bounds each time I resize the parent div? Please do help me out.

Answer 1

Use jquery-ui-resizable for parent.

<div class="parent">
    <div class="drag"></div>
</div>

Jquery :

$(".parent").resizable();

$(".drag").draggable( {
    containment: ".parent",
    cursor: "move",
    stop: function ( event, ui ) {}
});