Question

我有一个可排序的列表（任务）。它有助于确定任务的优先级，因此我希望保留此功能。现在我想在功能中添加子任务：我想让用户将一个任务拖到另一个任务并将其放在那里以将其转换为子任务。

将.draggable（）和.droppable（）应用于已经可排序的项目无效。我该怎么办？

Answer 1

我整理了demo如何做到这一点......但它可能不是最好的方法。以下是我发现的一些问题：

因为此代码使用占位符来确定您移动列表的位置，所以如果您从顶部接近项目，则只能将项目放在另一个项目中。我确实得到了一个工作版本，你可以把一个项目放在基础项目的任何地方，但代码太杂乱和麻烦。
有时当其他列表中的某个项目被删除时，它会被卡住。我不确定为什么，但当列表组移动到另一个列表时，它会变得不稳定。

我确信有一个更好的方法，一个计算列表项的交集（就像可排序脚本一样）。但这是一种快速而肮脏的方法。

$(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，从draggable和droppable构建所需的功能，并使用特殊的div作为间隔符，这将在dragover上膨胀，以方便在任务之间进行。

这在某种程度上起了作用，除非它的代码更多，并且它比使用refreshPositions选项设置为true时的抖动和bugprone要多得多。但是，可能还有其他正当理由要绕过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

使jQuery可排序项可以删除给他们的同行

2 个答案: