JQuery - drag and drop between divs when resizing an element

Question

I'm having problems with resizable, draggableand droppablein jQuery-UI.

I have an element that needs to be dragged and dropped between two divs. Inside the div, I want to be able to resize the element, but limit it to the current div that is inside.

When I try to add the containment: parent option for resizable, I see a lot of odd results. Has anyone come across 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 create a problem in this script: https://jsfiddle.net/atb87z6s/1/

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

, , div ( div).

Answer 1

!

-, , position: relative. position: absolute.

droppable drop:

$('.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);
  }
});

: https://jsfiddle.net/atb87z6s/2/