Сделайте jQuery сортируемыми предметами, доступными для их сверстников

Question

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

Применение .draggable () и .droppable () к уже сортируемым элементам не имеет никакого эффекта. Что я мог сделать?

Answer 1

Я собрал демо о том, как это сделать ... но это может быть не самый лучший метод. Вот некоторые проблемы, которые я обнаружил:

• Поскольку этот код использует заполнитель для определения места, в котором вы перемещаете список, вы можете поместить элемент внутрь другого элемента, только если подойдете к нему сверху. Я получил рабочую версию, где можно было бы поместить элемент в любом месте базового элемента, но код был слишком запутанным и громоздким.
• Иногда, когда предмет из другого списка опускается в предмет, он застревает. Я не уверен, почему, но он становится неприкрепленным, когда группа списков перемещается в другой список.

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

$(function() {
    var phTop, container, indx;
    $("#sortable1, #sortable2").sortable({
        connectWith: '.connectedSortable',
        beforeStop: function(e,ui){
            phTop = ui.placeholder.position().top;
            container = ui.placeholder.parent();
            indx = ui.placeholder.index();
        },
        stop: function(e,ui){
            var list = container.find('> li').eq(indx);
            // 15 is a pixel tolerance between the two items (dragging in from the top)
            if ( Math.abs( phTop - ui.position.top ) < 15 ) {
                // prevent list depth > 1
                if (ui.item.find('li').length > 0) { return; }
                // add ul inside of li to make subgroup
                if (!list.find('ul').length) { list.append('<ul></ul>'); }
                ui.item.appendTo( list.find('> ul') );
            }
            container.find('li > ul:empty').remove(); // remove empty subgroups
        }
    }).disableSelection();
});

Answer 2

После того, как я опубликовал свой вопрос, у меня не хватило терпения, и я решил вообще игнорировать UI.sortable, создавая необходимые функциональные возможности из перетаскиваемых и перетаскиваемых объектов и используя специальные div-ы в качестве разделителей, которые будут увеличиваться при перемещении между заданиями.

Это сработало в некоторой степени, за исключением того, что все это намного больше кода, и это намного более нервный и ошибочный, чем сортируемый, даже если для параметра refreshPositions установлено значение true.Тем не менее, могут быть и другие веские причины, чтобы хотеть обойти UI.sortable.

В очень коротком искусственном коде: $(.taskitem).draggable

revert: invalid

start: animate height of spacers from 0 to 5

$(.spacer).droppable

over: animate height from 5 to 50

out: animate height back to 5

drop: insert draggable after spacer

find spacer with same index as draggable and move it along