Question

我有两个清单。目标是将项目从第一个列表拖动到第二个列表中。我已在数据属性中存储了正确的顺序。

<ul class="connectedSortable ui-sortable" id="sortable1">
<li data-pos="4" class="ui-sortable-handle">item a</li>
<li data-pos="3" class="ui-sortable-handle">item b</li>
<li data-pos="1" class="ui-sortable-handle">item c</li>
<li data-pos="2" class="ui-sortable-handle">item d</li>
<li data-pos="5" class="ui-sortable-handle">item e</li>
<li data-pos="6" class="ui-sortable-handle">item f</li>
</ul>

<ul class="connectedSortable ui-sortable" id="sortable1">
<li data-pos="0" class="ui-sortable-handle">top item</li>
<li data-pos="7" class="ui-sortable-handle">bottom item</li>
</ul>

当第二个列表发生变化时，我会遍历这些项目以查看它们是否按正确顺序排列：

$("#sortable2").sortable({
    change: function () {
        var solved = false;
        console.log("-----------");
        //:not(.ui-sortable-placeholder)
        $.each($("#sortable2 .ui-sortable-handle"), function (key, val) {
            console.log("item key: " + key + " - data: " + $(val).data('pos'));
        });
    }
});

当我拖动第一个项目时，输出将显示为：

item key: 0 - data: 0
item key: 1 - data: undefined
item key: 2 - data: 8

但我可以在源代码中看到列表中有三个项目。随后的拖放将显示正确的索引，第一个仍未显示在循环中。我试图从循环中排除占位符，没有运气。

Answer 1

来自文档：

Change

此事件在排序期间触发，但仅在DOM位置发生变化时触发。

（强调我的）

当您将鼠标悬停在第二个可排序对象上时，会在其中插入占位符，更改DOM中可排序项目的位置，从而触发更改 -

占位符没有关联data，因此会打印undefined。如果您从迭代中exclude the placeholder，那么它将打印剩余项目的数据，这是预期的。

如果您尝试在删除或重新安排后获取的新项目数据，则应使用update事件代替（当然要排除占位符，因为这不是男人：）

Updated Fiddle

循环遍历jQuery UI可排序列表

1 个答案:

Change