Question

为了更有效地学习如何做到这一点，我很想知道如何改善这一点，或者我是否一起走错了路。

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

这基本上处理了我想要的小规模。

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

问题孩子，

这是在droppable（）的over事件中调用的函数

我有一系列空白点

    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');
    }

如果列表中没有其他内容，我会反过来做相同的事情，检查droppable上方是否有一个位置将项目推送到。

非常感谢任何想法！

Answer 1

对于类似的东西，可能值得直接操作DOM元素并在数组中保留对它们的引用，而不是使用jQuery选择器。您开始使用emptyHolders执行此操作，但我会为所有容器（可放置元素）执行此操作。

我会保留两个列表/数组：一个是拖动前的状态，另一个是显示。每当拖动过去一个新容器时，我首先将状态重置为拖动前状态，然后从那里重新计算更改后的状态，然后显示新的更改状态。（为了避免闪烁，我实际上不会显示预拖动状态，只是将我的内部列表重置为它。）这样你就可以尽可能避免使用新增加的内容来扰乱列表。

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

如果当前元素为空，则无变化。
如果当前元素不为空但其上方有空格，请将空白区域下方的项目向上移动一直到当前空格为空。
如果上面没有空格，则向下移动项目，如果列表中没有空格，则扩展列表。

也就是说，假设我正确了解您的需求。更常见的情况是不允许任何地方留空。所有插入都添加到列表的末尾或列表的头部，或者在没有添加空格的两个列表成员之间进行。如果您在列表中删除某些内容，它会立即浮动，直到它遇到另一个项目或列表中的第一项。

Jquery可排序样式功能与空白点

1 个答案: