12

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

到目前为止，我已经写了，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 上方是否有一个点可以将项目向上推入。

任何想法都非常感谢！

4

1 回答 1

3

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

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

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

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

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

于 2013-04-29T00:04:30.653 回答