jquery Sortable connectWith两次调用update方法

时间:2010-08-16 11:53:32

标签: jquery jquery-ui-sortable

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

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

8 个答案:

答案 0 :(得分:58)

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

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

答案 1 :(得分:11)

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
        }
    }
}

答案 2 :(得分:6)

试试这个:

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

答案 3 :(得分:4)

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

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

答案 4 :(得分:2)

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

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

答案 5 :(得分:2)

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

演示: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/

答案 6 :(得分:1)

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

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

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

答案 7 :(得分:0)

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
    }
}