Question

我有一个jQuery UI可排序列表，它与可拖动列表相关联。您可以将项目拖出可拖动列表并将其放在可排序列表中。这很有效。

但是，我想截取drop并完全改变 - 实际上替换 - 实际插入到可排序列表中的列表项。查看jQuery UI可排序的“更新”事件，我看到了各种方法来检查正在删除的项目，但我无法弄清楚如何说“不要插入刚刚删除的项目 - 插入此项目代替。“

有办法吗？如果没有，处理这个用例的“最佳实践”是什么？我敢肯定，我不是第一个想做这样事的人。

Answer 1

可能有更好的解决方案，但这可能适用于您的情况：

$("#sortable").sortable({
    update: function (e, ui) {
        var myElement = $("<li style='background-color: red'>" + $(ui.item).text() + "</li>");

        $(ui.item).replaceWith(myElement);
    }
});

请参阅演示：http://jsfiddle.net/lhoeppner/Qt6Qw/

更新事件在插入元素后调用，因此如果您确实需要阻止这种情况发生，则可能需要拦截beforeStop event。例如，您可以阻止插入：

$("#sortable").sortable({
    beforeStop: function () {
        $(this).sortable('cancel');
    }
});

然而，在这种情况下，原始元素只是恢复，您必须将其删除并手动确定它将插入的位置。

Answer 2

我正在做同样的事情，我找到的最佳解决方案是使用停止事件。我之前尝试过接收和更新事件，但结果并不理想。

stop事件的唯一缺点是即使项目在它们之间进行排序也会被触发。

拦截并替换掉在可排序的项目上

2 个答案: