CODEWITHSUNDEEP
javascriptdraggablejquery-ui-draggablecontainmentuidragitem
user0511
user0511

Reputation: 13

update containment bounds while dragging a UI draggable element

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.

Upvotes: 0

Views: 501

Answers (1)

sachin
sachin

Reputation: 827

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 ) {}
});

Upvotes: 0

Related Questions