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

Question

所以我来到了我真的无法在网上找到解决这个问题的方法。我正在使用像这样的jQuery Sortable函数：

<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之间时，我想得到的是另一个＆＃34; sortable＆＃34; -div。它们之间的间距为10像素，我认为必须用10像素的宽度代替它，所以我试过......

我在中间创建了一个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');

但它失败了这个错误：

  

错误：在初始化之前无法调用sortable上的方法;试图调用方法＆＃39;刷新＆＃39;

---

更新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的文档

---

你可以像你一样只使用sortable做类似的事情：

• 在基本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以检测需要在列表之间动态创建/删除空列表的情况

此外，您可以谷歌搜索可交换实施，这可能对您的任务有所帮助。

Answer 3

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

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

我没有看得太过分，但看起来你可以为你的div定义一个网格布局。

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