Question

我正在使用jquery ui sortable。我想让排序数组将它传递给drop事件上的处理文件。

我发现了一个有趣的事情.. 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

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

$(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 元素的任何其他人（来自 top answer），您可以通过以下调整来实现：

// 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);
    }
}

Jquery ui可排序的drop事件

4 个答案: