javascript – jQuery – 在div之间拖放,同时能够调整项目的大小

2024年1月7日 265次阅读

我在jQuery-UI中遇到了一些实现resizable,draggable和droppable的问题.

我有一个项目应该可以在两个div之间拖放.在div中,我希望能够调整项目的大小,但将其约束到它所在的当前div.

当我尝试在resizable中添加“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的孩子).

最佳答案 弄清楚了！

首先,您需要确保容器具有位置：相对.红色项目需要一个位置：绝对.

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/

点赞