Пример сортируемой/перетаскиваемой вложенности jQuery UI ⇐ Jquery

[Anonymous]

Я экспериментировал с сортируемым и перетаскиваемым пользовательским интерфейсом jQuery и ищу способ вложения элементов списка (только первого и второго уровня) в зависимости от того, где они расположены в списке.

Простой пример JSFiddle того, что я пытаюсь сделать: http://jsfiddle.net/picitelli/XZ4Tw/

Код: Выделить всё

$(".items").sortable({
connectWith: ".items",
placeholder: "placeholder",
update: function(event, ui) {
// update
},
sort: function(event, ui) {
// sort
}
});
$(".item").droppable({
accept: ".item",
hoverClass: "dragHover",
drop: function( event, ui ) {
console.log('drop');
if (ui.position.left >= 20) {
$(this).removeClass("first-level");
$(this).addClass("second-level");
} else {
$(this).removeClass("second-level");
$(this).addClass("first-level");
}
},
over: function( event, ui ) {
// over
},
activate: function( event, ui ) {
// activate
}
});

Я хочу иметь возможность перетаскивать элемент списка и размещать его до/после другого элемента списка, в зависимости от того, насколько далеко я нахожусь от левого (x) угла list и насколько далеко я нахожусь от нижнего/верхнего (y) элемента списка, рядом с которым я опускаюсь, этот элемент списка станет элементом первого или второго уровня. Например, если у меня есть элемент списка, перетащенный поверх другого, и я нахожусь ближе к нижней части этого элемента списка, над которым нахожу курсор, чем если бы я был дальше от нижней части, если я уроню его, он привяжется к внизу указанного элемента списка и быть элементом первого уровня. Если бы я переместил этот элемент списка дальше и бросил его, он привязался бы ко дну и стал бы элементом второго уровня. Заполнитель также обновится, вызывая класс просто при наведении курсора, чтобы показать, что выпадающий элемент списка будет находиться либо на первом, либо на втором уровне, прежде чем он будет фактически удален.

Согласно приведенной выше скрипте, в методе drop я проверяю, насколько далеко находится перетаскиваемый элемент списка слева. Если он больше или равен 20 пикселей, я добавляю класс «второго уровня», который устанавливает отступ для элемента списка. Если он меньше 20 пикселей, я добавляю класс «первого уровня», который сохраняет элемент списка на одном уровне слева. Только для расчета слева (x) это работает, но классы не применяются к отброшенному элементу списка, а применяются к элементу списка, через который он «перепрыгнул». Разве я не использую правильный метод для этого? Кроме того, как мне выполнить такое вычисление, чтобы определить, где будет привязываться элемент списка в зависимости от того, насколько далеко (y) он находится от элемента списка, над которым я нахожу курсор?

Любая обратная связь/направление будет принята с благодарностью.

Подробнее здесь: https://stackoverflow.com/questions/206 ... ng-example