Jquery ui JQuery UI可排序-向列表中添加占位符以模拟空白

jQueryUISortable对于没有间隙的列表非常有效，但是假设我想要呈现一个有间隙的项目列表，例如

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

其中，数字表示插槽编号。预期的行为是，如果用户在2插槽上拖动一个元素，2值被推送到空插槽3，用户可以将新元素放到2插槽中，而如果他们在空插槽3上拖动一个新元素，列表项不会向下推，用户可以将新项放到空插槽中。希望这是有道理的

我一直在研究JQuery UI可排序代码，似乎我需要利用更改和接收回调来实现这一点，但是，作为JQuery/JS的新手，我不清楚如何添加这些空槽占位符和管理选择列表，以便不使用自定义代码破坏排序功能

如有任何提示、示例等，将不胜感激

在对这个问题进行了一段时间的思考之后，我创建了一个JSFIDLE：

帮助解释问题。我相信我试图实现的一切都可以通过重写的重新排列方法实现。fiddle代码处理以下情况：一个项目正在替换填充项目，但存在一个奇怪的问题：如果您将一个项目从项目列表拖到填充列表中，则删除该项目，然后在填充列表中拖动同一项目，则填充列表将缩小1，这是一个问题

---

一旦你开始将更多的项目拖到填充列表中，就会出现更多的问题，但这就是我目前的问题所在。

我不确定我是否正确理解你的意思，但我想到的是：

假设：

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

让我知道这是否有帮助，或者你正在寻找其他东西。 同时解释整个任务（拖动的目的是什么）可能会有所帮助：-）

这是我做的。因为sortable（）不能在拖动过程中中断，所以它不是完美的，也不值得称赞。如果这是可能的，那么下降行动可能会完全接管。此外，我尝试重新排序时遇到了问题。我知道这种方法只适用于常规jQuery，但它不适用于将我搞砸的jQuery UI

---

冒着听起来像个混蛋的风险，如果是我，我会用jQuery编写功能。jQuery UI并不是它所说的那样：P

对不起，这是一个很难详细说明的问题。要求非常具体，很难描述

这是我一直在寻找的解决方案

这里的其他答案，虽然它们可能是描述不好的问题的解决方案，但并不是我想要的

---

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

与此问题非常类似：如果这有助于解释我试图实现的目标，那么您想要的是保留一个项目原来所在位置的多个占位符？另外，如果新项目在移动时会自动向下推，那么正常拖动会发生什么情况？对不起，我想我的解释没有正确描述该行为。我同意，使用回调将是理想的。希望下面是一个更好的描述：UI是两个列表，一个是“真实”项目列表，另一个列表以“占位符”项目开始。当“真实”项拖到“占位符”项列表时，当真实项悬停在“占位符”项上时，该项将被替换为可排序库的占位符（一个样式化的div，表示被删除项在列表中的位置）。这很简单。行为的难点是列表的大小必须保持不变，因此，如果用户从该区域拖到另一个“占位符”，则必须恢复以前的“占位符”，以便列表保持相同的大小。如果用户在列表中删除了一个“real”项，并将另一个“real”项拖到列表中，则第二个“real”项应替换“placeholder”，但将“real”项移动到悬停位置，类似于可排序库现在所做的操作。我仍然不能100%确定我是否完全理解您的需要，但我已尽可能地更新了我的答案（根据您的描述），因此，如果我离您越来越近，请告诉我：-）

$(".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
    }
});