在单独的容器中拖放，并调整放置的元素的位置

Drag and drop in separate containers, and adjust position of dropped element

本文关键字：调整 元素 位置 拖放 单独      更新时间：2023-09-26

[Edit]：TCHdvlp对其回复的评论中给出了解决方案。非常感谢

我需要将元素从一个容器（container1）拖到另一个容器中（container2），然后再拖回来，就像这个小提琴一样：

http://jsfiddle.net/U2nKh/20/

（这不是我创建的：见原始问题）

正如您在上面的示例中看到的，当元素附加到其新容器时，其"style"属性将被擦除，并捕捉到新容器的左上角。

$(ui.draggable).appendTo($(this)).removeAttr('style');

我希望拖车能留在新集装箱里，放在那里。

但如果我删除.removeAttr（"样式"），

$(ui.draggable).appendTo($(this));

位置信息被保留，但由于可拖动对象的父对象已更改，因此位置信息是不精确的。因此，当从容器1放入容器2时，我的可拖动对象的位置要低得多，而在另一种情况下则要高得多。

我能够根据集装箱的相对位置来计算元素应该"降落"的新位置。但我不知道该如何定义这个职位。

  • 我应该让.removeAttr（"样式"）用新值从头开始重新创建它吗？但是怎么做呢
  • 我应该删除那个部分，但修改位置值吗？但是怎么做呢

我很清楚，你可以给我一些建议。

谢谢！

仔细阅读所有小提琴！

可拖动div具有top:10px;和left:10px;属性。当它被拖动时，这些属性会发生变化。当它被放置在另一个可丢弃区域时，removeAttr('style');将删除内联样式并设置回10*10px偏移。但是，它并没有折断。

此外，可拖动元素是position:absolute，但可丢弃区域是position:relative。这意味着子元素相对于其父元素定位。

这就是为什么，对于原始小提琴，10*10px的位置看起来总是一样的，无论可丢弃的区域是什么。

在css中删除容器的position:relative和分区的position:absolute。

删除dropped函数中的removeAttr和append。

因为我们不希望元素附加到区域，所以我们不使用append。我们将使用2个变量来比较上一个和当前可丢弃区域。

http://jsfiddle.net/TCHdevlp/U2nKh/576/

相关文章：