1

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

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

4

2 回答 2

2

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

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

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

$(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();
});
于 2010-06-11T15:02:24.413 回答
1

在我发布我的问题后，我没有耐心，我决定完全忽略 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

于 2010-06-14T07:43:15.690 回答