Как jquery-ui-draggable позволяет использовать позицию: относительный?

Question

Я работаю над обновлением своего собственного перетаскиваемого скрипта, и мне интересно, как jquery-ui позволяет вам устанавливать положение элемента относительно и все же позволяет вам перемещать его, не затрагивая какие-либо элементы вокруг него, которыетакже расположены относительно и с плавающей точкой?

На данный момент мой текущий скрипт берет любой элемент и получает его позицию, но затем устанавливает его в абсолютное значение, когда вы его перетаскиваете, в результате все элементы вокруг него смещаются, чтобы принятьего место.

У меня есть только две идеи:

a) Автоматически устанавливать все элементы на странице в положение: абсолютное, когда я перемещаю перетаскиваемый элемент (кажется действительно неэффективным).

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 вы можете перемещать элемент, не затрагивая другие элементы в потоке документов.