使用按钮从可排序列表中删除项目

Question

我有一个可排序的 div 容器，每个容器都包含一个用于删除自身的按钮。这个按钮调用一个从 DOM 中移除 div 容器的函数。一切看起来都很好，直到我开始拖动并重新排序可排序的项目。现在已删除的元素不会显示在 GUI 中（这是预期的），但是检查可排序数组似乎表明它仍然存在。

如何获取它以便在删除期间正确更新此数组？或在分拣过程中。任何帮助将不胜感激。

下面是我的javascript。

$(function() {

    // Make Cron Jobs Sortable
    $("#controlContainer").sortable({
            items: "> div:not(#controlHeader), serialize",
            create: function(event, ui) {
                    cronJobOrder = $(this).sortable("toArray",{attribute: "id"});
            },
            update: function(event, ui) {
                    cronJobOrder = $(this).sortable("toArray",{attribute: "id"});
            }
    });

});

然后是我的功能

// the variable being passed in is the "Delete" button reference, that way it can find the div container it's in.
function deleteCronJob(cronJob) {

    var confirmation = window.confirm("Are You Sure?");

    if (confirmation) {
            $(cronJob).parents(".cronJobElement:eq(0)").fadeOut("medium", function() {
                    // Remove Item from cronJobOrder array
                    cronJobOrder.splice(cronJobOrder.indexOf($(this).attr("id")),1);
                    // Remove CronJob from View
                    $(this).attr("id").remove();
            });
    } else {
            return null;
    }

}

Answer 1

我为你准备了一个简单的小提琴。将可排序元素作为数组警报（以及单击删除按钮后的更新）。围绕它构建你的东西​​。

http://jsfiddle.net/K3Kxg/

function sortableArrayAlert() {
    sortableArray = $('li').toArray();
    alert(sortableArray);
}

$(function(){
    sortableArrayAlert();
    $('ul').sortable();
    $('a').click(function(e){
        e.preventDefault();
        $(this).parent().remove().then(sortableArrayAlert());
    });
});