Jquery ui 可排序放置事件

Posted 2023-02-24

【中文标题】Jquery ui 可排序放置事件

【英文标题】：Jquery ui sortable drop event

【发布时间】：2013-07-20 05:17:42

【问题描述】：

我正在使用可排序的 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 事件似乎不计算拖放事件。

【参考方案1】：

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

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

【讨论】：

如果您希望发送某种“成功”类型的消息而不是一般的“完成移动”，这很可能是更好的选择（而不是“停止”）。跨度>

是否可以确定移动了哪个 li 元素来调用更新调用？

【参考方案2】：

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

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

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

【讨论】：

@Prozi，那是因为你做错了。您评论中的 JSfiddle 实际上并没有将“droppable”事件更改为“sortable”事件。这就是你失败的原因，我在这里为你更新了你的 JSfiddle：jsfiddle.net/a94fak79

请参阅下面@SoursopTree 的答案，了解一个非常简单的解决方案，对我来说非常有效。

【参考方案3】：

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

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

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

【参考方案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);