使 jQuery 可排序项目可放置到其对等项

发布于 2024-09-05 04:37:01 字数 156 浏览 8 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

娇纵 2024-09-12 04:37:01

我整理了一个如何执行此操作的演示...但这可能不是最好的方法。以下是我发现的一些问题：

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

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

$(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();
});

I put together a demo of how to do this... but it may not be the best method. Here are some problems I've discovered:

Because this code uses the placeholder to figure out where you are moving the list, you can only drop an item inside another item if you approach it from the top. I did get a working version where you could drop an item anywhere inside the base item, but the code was just too messy and cumbersome.
Sometimes when an item from the other list is dropped in an item, it becomes stuck. I'm not sure why, but it becomes unstuck when the list group is moved to the other list.

I'm sure there is a better method, one that calculates the intersection of list items (just like the sortable script does). But this is a quick and dirty method.

$(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();
});

回复收藏 0 原文