从Jquery UI Sortable中删除项目 [英] Removing Items from Jquery UI Sortable

问题描述

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

基本上，我在JQuery UI可排序小部件周围有几个回调，并且我希望在我从小部件中删除元素后立即执行这些回调.正确的方法是什么?因为"$ .remove"或"$ .detach"似乎都起作用.

我不是在寻找有关我的问题的修补程序，而是对JQuery UI Sortable列表如何工作的更多解释，而下面的答案显然可以解决问题.我认为这不是一种干净的方法.我认为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/

解决方案

在您的remove事件处理程序中，只需在$(".delete").remove();之后包含对updatePosition的调用，这将不涉及从中删除元素的所有时间您的列表:如果这确实是您的意图，那么您就必须使用@ pmich35的 answer 之类的东西(尽管这确实意味着从那时起，每次$.remove调用，无论是否调用列表中的任何元素，都会调用updatePosition.

您的更新了小提琴.

编辑:$.sortable中目前没有符合您目的的删除"事件-该删除事件仅涵盖用户从列表中拖动列表项的特定情况到另一个可排序的列表. Sortable实际上并不会一直跟踪您的列表项-不在乎您是否以编程方式添加或删除项-它仅有助于用户拖动事件.它实际上并没有执行任何排序"，并且排序的所有外观只是jQuery拉DOM元素以形成其对象的方式(如果您将列表项缓存在jQuery对象中，然后将其拖动排序，缓存的列表项的顺序将与之前相同).由于排序"只是功能的一种幻觉，因此它不能"主动跟踪附加/删除.

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

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

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

I'm trying to find out the correct way to remove items from a JQuery UI Sortable list. I've created a JSfiddle illustrating my problem.

Basically, I have a couple of callbacks around a JQuery UI sortable widget, and I want these callbacks to be executed as soon as I remove an element from the widget. What's the correct way to do so? Because "$.remove" nor "$.detach" seems to work.

EDIT 1: I'm not looking for a hotfix on my problem but more of an explanation of how the JQuery UI Sortable list works, while the answers below clearly solve the problem. I don't think it's a clean way of doing it. I think that JQuery UI Sortable should be aware that when you remove an element from the list that's between two elements you should be needing a re-sort

If you take note below the function does not gets executed when I call remove on an element.

$(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/

解决方案

In your remove event handler, simply include a call to updatePosition after $(".delete").remove(); This won't cover any-and-all times elements are removed from your list: if that's truly your intent then you'll have to go with something like @pmich35's answer (though it does mean updatePosition will be called for every $.remove call, to any element in your list or not, from then on - a bit overkill)

Your updated fiddle.

EDIT: There is currently no "remove" event in $.sortable that suits your purpose - the remove event that is there only covers the specific case of your user dragging a list item from your list to another sortable list. Sortable doesn't actually keep track of your list items at all times - it doesn't care if you programmaticly add or remove items - it only facilitates user drag events. It doesn't actually perform any "sorting" as it were, and all appearances of sorting are just the way jQuery pulls DOM elements to form it's objects (if you cache the list items in a jQuery object, then drag-sort the items, the cache'd list items' order will be the same as before). Since the 'sorting' is just an illusion of the function, it "can't" actively track appends/removes.

There is another possible workaround: attach updatePosition to the ul element itself:

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

Which also accomplish your goal, but still isn't the "clean" way you're desiring. The 'remove' event on general elements was added in jQuery UI 1.10.3 (so jsfiddle won't cover it, they only go up to 1.9.2), and will call updatePosition whenever any current or future list item is removed (from the DOM - dragged removals are still caught by $.sortable's remove event).

这篇关于从Jquery UI Sortable中删除项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！