Question

我有一个无序列表，我想使用jQuery UI sortable订购。总的来说一切都很好。但我想将订单与数组数据源同步。

这是我到目前为止所得到的：

$('#jw_sortable').sortable({axis: 'y', handle: '.handle', start: sortStart, change: sortApply, helper: 'clone'});

function sortStart(event, ui) {
    ui.item.fromIndex = ui.item.index();
}
function sortApply(event, ui) {
    var index = ui.placeholder.index();
    index = ((ui.item.fromIndex < index) ? index - 1 : index);

    dataSource.move(ui.item.fromIndex, index); // using a prototype function

    ui.item.fromIndex = index;
}

这实际上有效。但只有当我在动作之间释放鼠标按钮时。我更愿意更新位置（因此我在最后一行设置了ui.item.fromIndex = index。）

但这不起作用。我认为这与在移动元素旁边创建的几个占位符和辅助元素有关（使用index()时）。

如何从每个change事件调用中获取“正确”fromIndex和toIndex？

Answer 1

我实际上是成功的。我只需要在不尊重（隐藏）原始项目的情况下找到占位符的索引。所以这就是我提出的：

function sortApply(event, ui) {
    var index = ui.placeholder.parent().children('li:visible').index(ui.placeholder);

    dataSource.move(ui.item.fromIndex, index);

    ui.item.fromIndex = index;
}

jQuery UI可排序与数组同步（使用克隆选项）

1 个答案: