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

Question

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

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

Мои только две идеи являются:

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

b) Создайте невидимую копию текущего элемента, который останется в точном месте.

и по существу осуществить:

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

, из которого можно определить, если либо стадии а или б еще нужно вообще.

Однако, из того, что я могу сказать, мне кажется, что jquery-ui-draggable ничего не делает.

Вот пример этого с помощью JQuery-UI-перемещаемой: http://jsfiddle.net/aNk6e/17/

Как я могу выполнить тот же эффект?

Answer 1

Вот как работает position: relative. Элемент все еще влияет на документ, как если бы он находился в исходном положении, но может быть перемещен.

Рассмотрим эту скрипку:

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

Обратите внимание, как две другие вещи все еще затронуты, как если бы элемент был в исходном положении, а элемент перемещается.

Просто манипулируя top и left, вы можете перемещать элемент вокруг, не затрагивая другие элементы в потоке документа.