javascript - 拦截并替换掉在可排序对象上的项目

Question

我有一个与可拖动列表连接的 jQuery UI 可排序列表。您可以将项目从可拖动列表中拖出，然后将其放到可排序列表中。这效果很好。

但是，我想拦截该删除并完全更改(实际上是替换)实际插入到可排序列表中的列表项。查看 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');
    }
});

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