javascript - 带有空点的 Jquery Sortable 样式函数

为了学习如何更有效地做到这一点 ，我很好奇任何关于如何改进这一点的想法，或者我是否一起走上了错误的道路。

到目前为止我已经写了，http://jsfiddle.net/mstefanko/LEjf8/9/

这基本上可以在小范围内处理我想要的。

有一些错误，我完全不相信这是可以写的那样好，可能是因为不尝试锁定 jquery ui 可排序的白痴。但是由于需要在没有简单项目列表的情况下执行此操作，并且希望将其扩展为包含多个拖放操作，因此我想至少介绍一下我需要做的事情来实现这一点，即使只是为了学习如何像这些工作的排序功能。

问题 child ，

这都是在 droppable() 的结束事件上调用的函数中

我有一系列空位

    var emptyHolders = [];

    $('.pipeline-holder').each(function(){
        if($(this).hasClass('holder-empty')){
            var eid = $(this).attr('id');
            emptyHolders.push(eid.substring(14));
        }
    });

cid 是你在上面的可放置元素，所以我找到下一个打开的插槽使用

   for (var i = 0; i < emptyHolders.length; i++) {
        var currentEmpty = emptyHolders[i];
        if (currentEmpty > cid) {
            nextEmpty = currentEmpty;
            i = emptyHolders.length;
        } else {
            prevEmpty = parseInt(currentEmpty);
        }
    }

如果列表下方有一个空槽，我会使用 for 循环来循环移动 DOM 周围的项目，以腾出放置元素所需的空间。

 if (nextEmpty != null) {
        var moveMe = nextEmpty -1;

        for (var i = moveMe; i >= cid; i--) {

            var nextcount = i + 1;
            var me = $('#pipeline-rank-' + i);
            var next = $('#pipeline-rank-' + i).parents('.pipeline-rank-row').next().find('.pipeline-holder');
            var pid = $('#pipeline-rank-' + i).find('.content-wrapper').attr('id');

            next.append($('#pipeline-rank-' + i).find('.content-wrapper'));
            next.removeClass('holder-empty');
            next.siblings('.remember-my-position-hover').html(pid);
        }
         $('#pipeline-rank-' + cid).addClass('holder-empty');
    }

如果列表中没有更远的位置，我会反向执行相同的操作，以检查可放置物品上方是否有一个位置可以将物品向上插入。

任何想法都非常感谢!

最佳答案

对于这样的事情，可能值得直接操作 DOM 元素并将对它们的引用保存在数组中，而不是使用 jQuery 选择器。您开始使用 emptyHolders 执行此操作，但我会为所有容器(可放置元素)执行此操作。

我会保留两个列表/数组:一个带有拖动前的状态，一个用于显示。每当拖动越过新容器时，我首先将状态重置为拖动前状态，然后从那里重新计算更改后的状态，然后显示新的更改状态。 (为了避免闪烁，我实际上不会显示预拖动状态，只是将我的内部列表重置为它。)这样您就可以尽可能避免新添加的列表干扰列表。

为了为新元素腾出空间，我建议如下:

如果当前元素为空，则无变化。

如果当前元素不为空但其上方有空位，则将空位下方的项目向上移动一位，直到当前空间为空。

如果上面没有空格，则向下移动项目，如果列表中没有空格，则扩展列表。

也就是说，假设我正确理解您的需求。更常见的情况是不允许任何地方出现空格。所有插入都添加到列表的末尾或列表的头部，或者在两个列表成员之间添加而没有添加空格。如果您将某物放在列表中，它会立即漂浮起来，直到它遇到另一个项目或成为列表中的第一个项目。

关于javascript - 带有空点的 Jquery Sortable 样式函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16243570/