jQuery - 在 div 之间拖放，同时能够调整项目的大小答案

【问题标题】：jQuery - drag and drop between divs while being able to resize itemjQuery - 在 div 之间拖放，同时能够调整项目的大小
【发布时间】：2017-09-19 21:49:44
【问题描述】：

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

你可以很容易地在这个小提琴中产生问题：https://jsfiddle.net/atb87z6s/1/

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

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

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案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/

【讨论】：