Question

我在jQuery-UI中实现while hour != 23 and minute != 28: print("not yet!") time.sleep(50) hour = dt.datetime.now().hour minute = dt.datetime.now().minute print("Your computer is about to get shutdowned") subprocess.call(["shutdown", "/s"])，resizable和draggable时遇到了一些问题。

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

当我尝试在resizable中添加“containment：'parent'”选项时，我看到很多奇怪的结果。有没有人碰到这个？

HTML ：

droppable

JS ：

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

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

您可以轻松地在这个小提琴中产生问题：https://jsfiddle.net/atb87z6s/1/

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

我认为这与红色项目不会成为目标蓝色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/

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

1 个答案: