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

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但我会对所有容器（可放置元素）执行此操作。

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

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

• 如果当前元素为空，则不进行任何更改。
• 如果当前元素不为空，但其上方有空空间，则将空空间下方的项目向上移动一位，直到当前空间为空。
• 如果上面没有空间，则向下移动项目，如果列表中没有空白空间，则扩展列表。

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