jquery-ui-draggable 如何允许使用 position:relative？

Question

我正在更新我自己的可拖动脚本，我想知道 jquery-ui 如何允许您将元素的位置设置为相对，并且仍然允许您移动它而不影响它周围的任何元素也是相对定位和浮动的？

截至目前，我当前的脚本采用任何元素并获取其位置，但是当您拖动它时将其设置为绝对，因此它周围的所有元素最终都会移动以取代它的位置。

我唯一的两个想法是：

a) 自动将页面上的所有元素设置为 position:absolute 当我移动一个可拖动的元素时（看起来效率很低）。

b) 创建当前元素的不可见副本，该副本将保留在确切位置。

以及实质上实现的：

var e = document.getElementById('div');
console.log(document.defaultView.getComputedStyle(e, null).getPropertyValue("position"));

从中我可以确定是否需要步骤 a 或 b。

但是，据我所知，在我看来 jquery-ui-draggable 两者都没有。

这是一个使用 jquery-ui-draggable 的示例：http://jsfiddle.net/aNk6e/17/

我怎样才能达到同样的效果？

Answer 1

这就是position: relative 的工作原理。该元素仍然会影响文档，就好像它在其原始位置一样，但可以移动。

考虑一下这个小提琴：

http://jsfiddle.net/aNk6e/18/

请注意其他两项仍然受到影响，就好像元素处于其原始位置但元素已移动一样。

通过简单地操作top 和left，您可以移动元素而不影响文档流中的其他元素。