Question

在下面的代码中，当项目从列表sortable1移动到sortable2时，更新函数会被调用两次。虽然我只需要调用一次该函数：

$("#sortable1 tbody, #sortable2 tbody").sortable({
    connectWith: '.connectedSortable tbody',
    helper: fixHelper,
    handle : '.handle',
    update : function () {
        var order = $('#sortable1 tbody').sortable('serialize');
    }    
}).disableSelection();

Answer 1

回答：http://forum.jquery.com/topic/sortables-update-callback-and-connectwith

update: function(e,ui) {
    if (this === ui.item.parent()[0]) {
        //your code here
    }
}

Answer 2

Stefan的回答很好，但它没有提到另一个难题，所以这里是 - 如果某人（像我一样）不能马上得到它。这应该使您可以在update()函数中处理所有这些并且不必弄乱receive()（当容器间移动发生时，它将仅被触发）：

update: function(e,ui) {
    if (this === ui.item.parent()[0]) {
        if (ui.sender !== null) {
          // the movement was from one container to another - do something to process it
          // ui.sender will be the reference to original container
        } else {
          // the move was performed within the same container - do your "same container" stuff
        }
    }
}

Answer 3

试试这个：

update: function(e,ui) {
    if (!ui.sender) {
        //your code here
    }
}

Answer 4

您应该使用接收事件（http://jqueryui.com/demos/sortable/#event-receive）。

在http://bugs.jqueryui.com/ticket/3178处查看最底部的分辨率。

Answer 5

我刚碰到这个。这是jQuery UI中的一个错误，请参阅http://bugs.jqueryui.com/ticket/4872#comment:2

我评论是否可以唤醒任何人什么时候会有修复。社区驱动发展的乐趣：P

Answer 6

如何使用删除，接收和更新来捕获所有更改并将它们作为数组发送到服务器？

演示：http://jsfiddle.net/r2d3/p3J8z/

$(function(){

    /* Here we will store all data */
    var myArguments = {};   

    function assembleData(object,arguments)
    {       
        var data = $(object).sortable('toArray'); // Get array data 
        var step_id = $(object).attr("id"); // Get step_id and we will use it as property name
        var arrayLength = data.length; // no need to explain

        /* Create step_id property if it does not exist */
        if(!arguments.hasOwnProperty(step_id)) 
        { 
            arguments[step_id] = new Array();
        }   

        /* Loop through all items */
        for (var i = 0; i < arrayLength; i++) 
        {
            var image_id = data[i]; 
            /* push all image_id onto property step_id (which is an array) */
            arguments[step_id].push(image_id);          
        }
        return arguments;
    }   

    /* Sort images */
    $('.step').sortable({
        connectWith: '.step',
        items : ':not(.title)',
        /* That's fired first */    
        start : function( event, ui ) {
            myArguments = {}; /* Reset the array*/  
        },      
        /* That's fired second */
        remove : function( event, ui ) {
            /* Get array of items in the list where we removed the item */          
            myArguments = assembleData(this,myArguments);
        },      
        /* That's fired thrird */       
        receive : function( event, ui ) {
            /* Get array of items where we added a new item */  
            myArguments = assembleData(this,myArguments);       
        },
        update: function(e,ui) {
            if (this === ui.item.parent()[0]) {
                 /* In case the change occures in the same container */ 
                 if (ui.sender == null) {
                    myArguments = assembleData(this,myArguments);       
                } 
            }
        },      
        /* That's fired last */         
        stop : function( event, ui ) {                  
            /* Send JSON to the server */
            $("#result").html("Send JSON to the server:<pre>"+JSON.stringify(myArguments)+"</pre>");        
        },  
    });
});

以下是解决方案的完整说明： http://r2d2.cc/2014/07/22/jquery-sortable-connectwith-how-to-save-all-changes-to-the-database/

Answer 7

要调用一次事件，您可以使用receive方法。一旦列表中的项目被放入另一个列表中，就会调用它。

$( ".selector" ).sortable({
  stop: function( event, ui ) {}
});

来源：http://api.jqueryui.com/sortable/#event-receive。

Answer 8

update: function(e, ui) {
    var draggedOut = this !== ui.item.parent()[0] && !$.contains(this, ui.item.parent()[0]);
    var draggedIn = ui.sender !== null;
    var sameList = !draggedOut && !draggedIn;

    if (sameList || draggedIn) {
        // Do stuff
    }
}

jquery Sortable connectWith两次调用update方法

8 个答案: