Question

JQuery UI Sortable非常适用于没有间隙的列表，但是我想要呈现带有间隙的项目列表，例如。

1,2，空，4,5,6，空，8

其中数字代表插槽号。然后预期的行为是，如果用户在2槽上拖动一个元素，则将2值推送到空槽3，并且用户可以将新元素放入2槽中，而如果它们将新元素拖过2槽。空3个插槽，列表项不会按下，用户可以将新项目放入空的3个插槽中。希望这是有道理的。

我一直在查看JQuery UI可排序代码，似乎我需要利用更改并接收回调才能实现这一点，但是，对于JQuery / JS一般都是新手，我不清楚用什么来添加这些空插槽占位符并管理选择列表，这样我就不会破坏自定义代码的排序功能。

任何指针，示例等都会非常感激。

在我的头上敲了一会儿后，我创造了一个jsFiddle：http://jsfiddle.net/pdHnX/

帮助解释问题。我相信我想要完成的所有事情都可能发生在被重写的_rearrange方法中。小提琴代码处理项目正在替换填充项目的情况，但是存在一个奇怪的问题，如果您将项目列表中的项目拖动到填充列表，则删除该项目，然后在填充列表中拖动相同的项目，填充列表缩小1，这是一个问题。

一旦你开始将更多项目拖入填充列表，就会出现更多问题，但这就是我现在处理问题的地方。

Answer 1

我不确定我是否理解正确，但这就是我想出的：

http://jsfiddle.net/py3DE/

$(".source .item").draggable({ revert: "invalid", appendTo: 'body', helper: 'clone',
    start: function(ev, ui){ ui.helper.width($(this).width()); }                    // ensure helper width
});

$(".target .empty").droppable({ tolerance: 'pointer', hoverClass: 'highlight',
    drop: function(ev, ui){
        var item = ui.draggable;
        if (!ui.draggable.closest('.empty').length) item = item.clone().draggable();// if item was dragged from the source list - clone it
        this.innerHTML = '';                                                        // clean the placeholder
        item.css({ top: 0, left: 0 }).appendTo(this);                                // append item to placeholder
    }
});

<强>假设：

如果您从顶部列表中拖动项目 - 它将被“克隆”（原始文件将保留在列表中）
如果您从底部列表中拖动项目 - 它将移动（留空占位符）
如果您删除底部列表的占位符上的任何项目 - 它将替换占位符
如果您删除底部列表的非空占位符/项目上的任何项目 - 它将替换它
两个列表的大小始终保持不变

如果这有帮助，或者您正在寻找其他内容，请告诉我。同样解释整个任务（拖动的目的是什么）可能会有所帮助： - ）

Answer 2

抱歉，这是一个非常难以详述的问题。这些要求非常具体，难以描述。

这是我正在寻找的解决方案。

其他人在这里回答，虽然他们可能已经解决了描述不佳的问题，但并不是我想要的。

http://jsfiddle.net/vfezJ/

不幸的是，sortable.js代码非常多毛，因此链接的代码也非常多毛。我发布的解决方案也对CSS类和DOM ID做了一些假设，以完成工作。

Answer 3

http://jsbin.com/igozat/2

这是我掀起的事情。它并不完美或值得信赖，因为sortable（）不能在拖拽中间插入。如果可能，那么放弃行动可以完全接管。此外，我重新排序的尝试是错误的。我知道这种方法只适用于常规的jQuery，但它不适用于jQuery UI让我失望。

冒着听起来像混蛋的风险，如果是我，我会用jQuery编写功能。 jQuery UI并不是它的全部内容。：P

JQuery UI可排序 - 将占位符添加到列表以模拟空白空间

3 个答案: