jquery - Jquery ui 可排序放置事件

Question

我正在使用可排序的 jquery ui。我想让排序数组在放置事件时将其传递给处理文件。

我发现了一件有趣的事情.. http://jsfiddle.net/7Ny9h/

$(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();

    $( "#sortable li" ).droppable({
        drop: function( ) {
            var order = $("#sortable").sortable("serialize", {key:'order[]'});
            $( "p" ).html( order );
        }
    });
});

看到示例，如果我移动 BOX No.2，则 BOX 2 被排除在数组之外。

也许我需要一种“dropend”事件，因为 jquery ui drop 事件似乎不计算拖放事件。

Answer 1

您也可以使用update它来检测它。

$( "#sortable" ).sortable({
    update: function( ) {
        // do stuff
    }
});

Answer 2

stop我可以用 jQuery UI Sortable事件解决这个问题。

$(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();

    $( "#sortable" ).sortable({
        stop: function( ) {
            var order = $("#sortable").sortable("serialize", {key:'order[]'});
            $( "p" ).html( order );
        }
    });
});

Answer 3

在单个页面上使用多个可排序列表时，您还需要保存两个列表的顺序以及哪些项目被移动到哪个列表中，只有 stop() 方法有效。当元素从一个列表移动到另一个列表时，所有其他事件都会触发两次或更多次。

$(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();

    $( "#sortable" ).sortable({
        stop: function( ) {
            var order = $("#sortable").sortable("serialize", {key:'order[]'});
            $( "p" ).html( order );
        }
    });
});

Answer 4

对于需要像我一样专门访问触发更新功能的 LI 元素的其他任何人，（来自最佳答案）您可以通过以下调整来做到这一点：

// Simply include the event in the function parameters
$( "#sortable" ).sortable({
    update: function(ev) {
        // ev.originalEvent.target is the target that was clicked to drag the li inside the sortable (ev.target is the sortable ul itself)
        // In case you have subelements in your li, call a recursive function that moves up in the DOM until it hits an LI
        var li_elem = getLI(ev.originalEvent.target);
        // Do work using the li element that triggered this event below!
    }
});

// Recursive function to get the LI element
function getLI(elem) {
    // If we have the LI return
    if (elem.tagName === "LI") {
        return(elem);
    }
    // If not check the parent
    const parent = elem.parentElement;
    if (parent.tagName != "LI") {
        // If still not LI element, recall function but pass in the parent elemtn
        return(getLI(parent));
        
    }
    else {
        // Return the parent if it's the LI element
        return(parent);
    }
}