javascript - jQuery - 在 div 之间拖放，同时能够调整元素大小

Question

我在 jQuery-UI 中实现 resizable、draggable 和 droppable 时遇到了一些问题。

我有一个元素应该能够在 2 个 div 之间拖放。在 div 中时，我希望能够调整元素的大小但将其限制在它所在的当前 div 内。

当我尝试向可调整大小添加“containment: 'parent'”选项时，我看到了很多奇怪的结果。有人遇到过这个吗？

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

您可以很容易地在这个 fiddle 中产生问题:https://jsfiddle.net/atb87z6s/1/

将红色方 block 从顶部蓝色容器拖到底部蓝色容器中，然后尝试调整红色方 block 的大小。

我认为这与红色元素没有成为目标蓝色 div 的子项(相反，仍然是顶部蓝色 div 的子项)有关。

Answer 1

想通了!

首先，您需要确保容器具有position: relative。红色项需要一个 position: absolute。

可放置选项需要放置事件的处理程序:

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

更新 fiddle 的链接:https://jsfiddle.net/atb87z6s/2/