jQuery - drag and drop between divs while being able to resize item

Question

I'm having some issues implementing resizable, draggable, and droppable in jQuery-UI.

I have an item that should be able to be dragged and dropped between 2 divs. While inside a div, I want to be able to resize the item but constrain it to the current div that it is inside.

When I try adding a "containment: 'parent'" option to the resizable, I see a lot of odd results. Has anyone run into this?

HTML:

<div class="container1">
    <div class="widget1">
    </div>
</div>

<div class="container2">
</div>

JS:

$('.widget1').resizable({
    containment: 'parent'
}).draggable({
    revert: 'invalid'
});

$('.container1, .container2').droppable({
    tolerance: 'fit
});

You can easily produce the issue in this fiddle: https://jsfiddle.net/atb87z6s/1/

Drag the red square from the top blue container into the bottom blue container, and then try to resize the red square.

I think this has to do with the red item not becoming a child of the target blue div (instead, remaining a child of the top blue div).

msenevir msenevir · Accepted Answer · 2017-09-19T22:32:41

Figured it out!

First, you need to make sure the containers have position: relative. The red item needs a position: absolute.

The droppable option needs a handler for the drop event:

$('.container1, .container2').droppable({
  tolerance: 'fit',
  drop(ev, ui) {
    const droppedTarget = $(this);
    const elem = ui.draggable.detach();

    elem.css({
        top: ui.offset.top - droppedTarget.offset().top,
        left: ui.offset.left - droppedTarget.offset().left 
    });

    elem.appendTo(droppedTarget);
  }
});

Link to updated fiddle: https://jsfiddle.net/atb87z6s/2/

jQuery - drag and drop between divs while being able to resize item

1 Answers