从 Jquery UI 可排序中删除项目答案

【问题标题】：Removing Items from Jquery UI Sortable从 Jquery UI 可排序中删除项目
【发布时间】：2013-11-02 09:33:50
【问题描述】：

我正在尝试找出从 JQuery UI 可排序列表中删除项目的正确方法。我创建了一个 JSfiddle 来说明我的问题。

基本上，我有几个围绕 JQuery UI 可排序小部件的回调，我希望在我从小部件中删除一个元素后立即执行这些回调。这样做的正确方法是什么？因为 "$.remove" 和 "$.detach" 似乎都可以工作。

编辑 1：我不是在寻找关于我的问题的修补程序，而是更多关于 JQuery UI 可排序列表如何工作的解释，而下面的答案清楚地解决了问题。我不认为这是一种干净的方式。我认为 JQuery UI Sortable 应该知道，当您从列表中删除两个元素之间的元素时，您应该需要重新排序

如果您注意到下面的函数，当我对元素调用 remove 时，该函数不会被执行。

$(document).ready(function(){
    $('ul').sortable({
        stop: function(event, ui) {
            updatePosition();
        }
    });

    $('.remove').on('click', function(e){
        $(".delete").remove();
    });
});

function updatePosition(){
    $('ul li').each(function(i){
        $(this).html(i + 1);
    });
}

http://jsfiddle.net/72RTz/2/

【问题讨论】：

标签： jquery jquery-ui jquery-ui-sortable

【解决方案1】：

你可以重写 remove 函数，虽然它不是很优化：

(function(){
    oldRemove = jQuery.fn.remove;
    jQuery.fn.remove=function(){
        oldRemove.apply(this, arguments);
        updatePosition();    
    }
})();

$(document).ready(function(){
    $('ul').sortable({
        stop: function(event, ui) {
            updatePosition();
        }
    });


    $('.remove').on('click', function(e){
        $(".delete").remove();
    });


});

function updatePosition(){
    $('ul li').each(function(i){
        $(this).html(i + 1);
    });
}

【讨论】：

虽然这感觉更干净。我觉得这不是我应该这样做的原因。 JQuery UI Sortable 应该知道何时删除了可排序元素？也许这在库中丢失了，并且应该这样做的拉取请求是什么？ @pmich35
事实上，解决方案不是最干净的，这里讨论了对删除事件的绑定：stackoverflow.com/questions/2200494/… 提出的解决方案比我的更干净。为了回答您的问题，我认为删除元素不应触发可排序回调，因为删除对象时对象的顺序保持正确。
我已经用我目前正在寻找的问题更新了我的问题。

【解决方案2】：

在您的删除事件处理程序中，只需在 $(".delete").remove(); 之后包含对 updatePosition 的调用这不会涵盖从列表中删除元素的任何时间：如果这确实是您的意图，那么您将不得不使用类似@pmich35 的answer 之类的东西（尽管这确实意味着每次$.remove 调用都会调用updatePosition，无论是否调用列表中的任何元素，从那时起 - 有点矫枉过正）

你的updated fiddle。

编辑：$.sortable 中目前没有适合您目的的“删除”事件 - 那里的删除事件仅涵盖您的用户从列表中拖动列表项的特定情况到另一个可排序的列表。 Sortable 实际上并不会一直跟踪您的列表项 - 它并不关心您是否以编程方式添加或删除项目 - 它只会促进用户拖动事件。它实际上并没有按原样执行任何“排序”，所有排序的外观都只是 jQuery 拉取 DOM 元素以形成其对象的方式（如果您将列表项缓存在 jQuery 对象中，然后对项目进行拖动排序，缓存的列表项的顺序将与以前相同）。由于“排序”只是功能的一种错觉，它“不能”主动跟踪附加/删除。

还有另一种可能的解决方法：将updatePosition 附加到ul 元素本身：

$( 'ul' ).on( 'remove', 'li', updatePosition );

这也可以实现您的目标，但仍然不是您想要的“干净”方式。 jQuery UI 1.10.3 中添加了通用元素上的 'remove' 事件（因此 jsfiddle 不会覆盖它，它们只会上升到 1.9.2），并且会在任何当前 或未来列表项被删除（从 DOM 中 - 拖动的删除仍然被 $.sortable 的删除事件捕获）。

【讨论】：