Как заставить JQuery UI сортировать работу с абсолютным позиционированием?

Question

Я пытаюсь использовать сортировку jQuery UI (http://jqueryui.com/demos/sortable/) на странице для перетаскивания и сортировки пары элементов DOM. Все элементы имеют абсолютное позиционирование, и именно здесь начинаются проблемы. что пользовательский интерфейс jQuery считает, что все li расположены в верхнем левом углу (вот где заполнитель в любом случае заканчивается).

Я создал jsfiddle здесь: http://jsfiddle.net/winter/4ePe6/, где проблема вполне решаема.

То, чего я хочу добиться, это следующее: когда предмет 1 отбрасывается между предметами 2 и 3, предмет 2 перемещается туда, где находился предмет 1, предмет 1 занимает место предмета 2, а предмет 3 и выше остается там, где они находятся. , Перед сбросом заполнитель показывает, куда будет помещен элемент 1 при его падении, т.е. фактическое перемещение элемента 2 происходит перед сбросом.

Заранее спасибо.

Answer 1

Есть 2 способа добиться этого.Вы можете использовать некоторые хитрости CSS с селектором nth-child или nth-type-of, чтобы применить абсолютное позиционирование к индексам, а не к элементам.Таким образом, когда элементы перемещаются в дереве DOM из-за того, как работает сортируемый плагин, они будут фиксировать правильные атрибуты позиции, поскольку индексы останутся прежними.плагина, который срабатывает при изменении порядка элементов в вашем списке.Таким образом, в функции события вам нужно выполнить итерацию по вашим элементам и повторно применить правильное позиционирование.

См. этот блог для более подробной информации об использовании обоих методов:

Answer 2

Решил это, пропустив абсолютные размещения и проработав это с заполнением между li и абсолютной позиционируемой div-оболочкой вокруг ul.

Answer 3

Я МОГУ заставить его работать ... Но нужно добавить $ window.scrollTop () к элементу при перетаскивании ...

$tracksSortable = $tracks
    .sortable('destroy')
    .disableSelection()
    .sortable({
        update:function(){
        },
        sort: function(event, ui) {
            $(ui.item).css({marginTop:$window.scrollTop()+'px'});
        },
        beforeStop: function(event, ui) {
            $(ui.item).css({marginTop:'0'});
        },
        items         : '.track',
        axis          : 'y',
        scroll        : true,
        containment   : 'body',
        placeholder   : 'trackPlaceHolder',
        distance      : 10,
        delay         : 500,
        revert        : false,
        cursorAt      : {top:15}
    });

Answer 4

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

Чтобы расположить заполнитель в месте, где находится движущийся элемент, вам нужно сделать две вещи:

1. Дайте заполнителю свой собственный класс и
2. Установите позицию заполнителя в зависимости от элемента, для которого он стоит.

Например, для его класса и стиля:

.my-placeholder {
  background:red;
  height: 1.5em;
  line-height: 1.2em;
  position: absolute;
  top: 20%;
  width: 10%;
}

Теперь все, что остается, - это установить его «левое» положение в соответствии с элементом, который он заменяет.Это можно сделать, установив обработчик события «start», чтобы сделать это, когда начинается перетаскивание.

$("#sortable").sortable({
    placeholder: "my-placeholder",
    start: function(event, ui) {
        $(".my-placeholder").css("left", ui.originalPosition.left);
    },
});