jquery Sortable connectWith两次调用update方法
在下面的代码中，当一个项从列表sortable1移动到sortable2时，update函数被调用两次。 虽然我只需要调用一次该函数：
$("#sortable1 tbody, #sortable2 tbody").sortable({ connectWith: '.connectedSortable tbody', helper: fixHelper, handle : '.handle', update : function () { var order = $('#sortable1 tbody').sortable('serialize'); } }).disableSelection();
答案来自： http ： //forum.jquery.com/topic/sortables-update-callback-and-connectwith
update: function(e,ui) { if (this === ui.item.parent()[0]) { //your code here } }
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 } } }
试试这个：
update: function(e,ui) { if (!ui.sender) { //your code here } }
您应该使用receive事件（ http://jqueryui.com/demos/sortable/#event-receive ）。
查看http://bugs.jqueryui.com/ticket/3178底部的分辨率。
我刚碰到这个。 这是jQuery UI中的一个错误，请参阅http://bugs.jqueryui.com/ticket/4872#comment:2
我评论是否可以唤醒任何人什么时候会有一个修复。 社区驱动发展的乐趣：P
如何使用删除，接收和更新来捕获所有更改并将它们作为数组发送到服务器？
演示： 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:"+JSON.stringify(myArguments)+""); }, }); });
以下是该解决方案的完整说明： http ： //r2d2.cc/2014/07/22/jquery-sortable-connectwith-how-to-save-all-changes-to-the-database/
要调用事件一次，您可以使用receive方法。 一旦列表中的项目被放入另一个列表中，就会调用它。
$( ".selector" ).sortable({ stop: function( event, ui ) {} });
资料来源： http ： //api.jqueryui.com/sortable/#event-receive 。
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 } }