可排序，放置在两个列表之间时自动创建新列表

Question

所以我到了在网上找不到任何关于如何解决这个问题的地步。我正在使用这样的 jQuery 可排序函数：

<div class="sortable">
    <div class="item" id="1"></div>
    <div class="item" id="2"></div>
</div>
<div class="sortable">
    <div class="item" id="3"></div>
    <div class="item" id="4"></div>
    <div class="item" id="5"></div>
</div>

现在，当项目被拖动到两个可排序 div 之间时，我想要得到另一个“可排序”-div。它们之间有 10 像素的边距，我认为必须用 10 像素宽度的 div 替换，所以我尝试了..

我在中间创建了一个 div，也可以排序，但宽度为 10px 边距。这件事不起作用，只是因为当一个项目被拖进来时，它们之间不再有 div 了，它只能做一次。

这是一个小提琴： http://jsfiddle.net/p5Z3s/5/

谁能指出我正确的方向？我不需要代码，只需有人指出我从哪里开始以及如何解决这个问题。

示例：

当像这样拖动项目时：

应该把它放在中间，像这样：

---

更新 1：

我只是尝试使用新的可排序 div 创建间距，请查看小提琴： http://jsfiddle.net/p5Z3s/6/

但是，现在的问题是，没有调用更新函数，这是保存位置所必需的。此外，一旦我将它拖到两列之间，我就会再次添加所需的间距：

$(this).before( "<div class=\"dropable gallery__item sortable\"></div>" );
$(this).after( "<div class=\"dropable gallery__item sortable\"></div>" );

它们已成功创建，但无法再在其中拖动项目。

我尝试使用以下方法更新和刷新它们：

$( ".sortable" ).sortable('refresh').trigger('update');

但它失败并出现此错误：

错误：无法在初始化之前调用可排序的方法；试图调用方法“刷新”

---

更新 2：

问题

$( ".sortable" ).sortable('refresh').trigger('update');

解决了。现在唯一不起作用的是：

$(this).before( "<div class=\"dropable gallery__item sortable\"></div>" );
$(this).after( "<div class=\"dropable gallery__item sortable\"></div>" );

已创建 div，但不允许在其中放置可排序的项目。

Answer 1

重点是：

• 在新创建的 div 上调用 .sortable()（我想你已经知道了这么多......），
• 给现有的人打电话.sortable('refresh')，让他们了解新人。

---

您可以在列之间添加空 div，并使用 .droppable() ：

<div class="sortable">
    <div class="item" id="1"></div>
    <div class="item" id="2"></div>
</div>
<div class="droppable">
</div>
<div class="sortable">
    <div class="item" id="3"></div>
    <div class="item" id="4"></div>
    <div class="item" id="5"></div>
</div>

$('.droppable').droppable({
    accept: ".item",
    drop: function(e, ui) {
       //insert a new sortable list in the dom
       //stick the item inside this list
       //update the setup :
       // - $(new list).sortable(...);
       //     make the existing lists aware of the new list :
       // - $(all sortables).sortable('refresh');
    }
});

参见this sortable example（与droppable 的交互）和droppable 的文档

---

您可以只使用sortables 来做类似的事情，就像您所做的那样：

• 在基本 html 或 javascript 设置中，在每对起始 div 之间插入一个空的可排序 div，
• 每次删除一个项目时，检查结果布局，并修复交替non-empty/empty/non-empty/...，
• 不要忘记在新创建的 div 上调用 .sortable()，在现有的 div 上调用 .sortable('refresh')。

---

FWIW，我发现将 existing, sortable list / empty droppable placeholder 两个角色分开更清楚

Answer 2

jqueryUI sortable 没有实现这个功能

您应该查看empty lists 选项并升级sortable 以检测需要在列表之间动态创建/删除空列表的情况

您还可以在 Google 上搜索 可交换 实现，这可能对您的任务有所帮助。

Answer 3

您看过portlet 吗？看起来它对你有用。

http://jqueryui.com/sortable/#portlets

我没有深入研究它，但看起来您实际上可以为您的 div 定义网格布局。

如果这不起作用，那么我很可能误解了你的问题。