使 jQuery 可排序项目可拖放到他们的同行答案

【问题标题】：Make jQuery sortable items droppable to their peers使 jQuery 可排序项目可拖放到他们的同行
【发布时间】：2011-03-01 21:03:29
【问题描述】：

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

对已经可排序的项目应用 .draggable() 和 .droppable() 无效。我能做什么？

【问题讨论】：

标签： jquery-ui draggable jquery-ui-sortable droppable

【解决方案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();
});

【讨论】：

嗨，Fudgey，您为我的问题付出了这么多努力，我几乎感到尴尬。谢谢！您的代码非常优雅。我想我也有一个解决方案，即只有在从上方拖入时才接受放入任务的问题。这是稍微改变的小提琴代码。 jsfiddle.net/Jyjtp
思考和修补时间稍长，我发现 sortable 存在两个问题，即使您使用了解决方法：1. 没有 'over' 事件允许任务表明它们是可丢弃的，2. （更严重）子任务只能在 sortable 初始化后创建，即它们必须是顶级任务才能被拖到另一个任务上。
您好，有一个与可排序脚本相关的“结束”事件，但不幸的是，当您超过整个组（ul）而不是单个元素时它会触发。至于您的第二个问题，我不确定如何为您解决。你到底想完成什么？
我已经解决了“过度”问题，方法是添加一个类以根据占位符和帮助器的相对位置列出具有特定索引的项目，并使用您的代码作为基础。如果在排序停止时任务具有“hoverTarget”类，我的代码会确保将拖动的任务放在目标上。第二个问题根本不是问题，它实际上让用户体验更加清晰，当他们只能检查一个任务的子任务，或者将主要任务变成子任务，但不能同时在同一个视图中。再次感谢！

【解决方案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

【讨论】：