jQuery UI可排序连接列表 - 获取更改状态

Question

我正在实施sortable plugin of jQuery UI。 有两列，我们可以将元素从一列拖放到另一列。 我有以下的javascript代码：

$(function() { 
    $("#sortable1, #sortable2").sortable({ 
     connectWith: ".connectedSortable", 
     update: function() { 
      var order1 = $('#sortable1').sortable('toArray').toString(); 
      var order2 = $('#sortable2').sortable('toArray').toString(); 

      alert("Order 1:" + order1 + "\n Order 2:" + order2); 
      $.ajax({ 
       type: "POST", 
       url: "/echo/json/", 
       data: "order1=" + order1 + "&order2=" + order2, 
       dataType: "json", 
       success: function (data) { 
       } 
      }); 
     } 
    }).disableSelection(); 
}); 

和HTML：

<ul id="sortable1" class="connectedSortable"> 
    <li class="ui-state-default" id='item1'>Item 1</li> 
    <li class="ui-state-default" id='item2'>Item 2</li> 
    <li class="ui-state-default" id='item3'>Item 3</li> 
    <li class="ui-state-default" id='item4'>Item 4</li> 
    <li class="ui-state-default" id='item5'>Item 5</li> 
</ul> 

<ul id="sortable2" class="connectedSortable"> 
    <li class="ui-state-highlight" id='item6'>Item 6</li> 
    <li class="ui-state-highlight" id='item7'>Item 7</li> 
    <li class="ui-state-highlight" id='item8'>Item 8</li> 
    <li class="ui-state-highlight" id='item9'>Item 9</li> 
    <li class="ui-state-highlight" id='item10'>Item 10</li> 
</ul> 

从上面的JavaScript，我可以改变整个后得到第1列和第2列的顺序。但是，我想知道已更改的单个项目。 像，下面这个图片，我有项目3由第一栏拖动到第2列。我想得到这样的输出 - 通过使用start事件像update事件Item3_before=Column1,Item3_after=Column2.

在上面的JavaScript代码，我们可以获取元素的Before状态，但不是单个元素;它在所有元素的状态之前给出。

Answer 1

很少有步骤。我设置了一个对象来存储这两个列表在激活，预排序和后排序中的值。这项工作完成，我用这个方法来确定的区别：留下他们作为阵列使得它更容易比较和操纵https://jsfiddle.net/Twisty/kfedekmj/

jQuery的

$(function() { 
    var items = { 
    "act": { 
     1: [], 
     2: [] 
    }, 
    "pre": { 
     1: [], 
     2: [] 
    }, 
    "post": { 
     1: [], 
     2: [] 
    } 
    } 

    function log(et) { 
    if (!et) { 
     console.log("Activation"); 
     console.log(" - order1: ", items.act[1].toString()); 
     console.log(" - order2: ", items.act[2].toString()); 
    } 
    if (et == "sortstart") { 
     console.log("Pre-Sort"); 
     console.log(" - order1: ", items.pre[1].toString()); 
     console.log(" - order2: ", items.pre[2].toString()); 
    } 
    if (et == "sortupdate") { 
     console.log("Post-Sort"); 
     console.log(" - order1: ", items.post[1].toString()); 
     console.log(" - order2: ", items.post[2].toString()); 
    } 
    } 

    function determineChange(a1, a2) { 
    var a = {}, 
     diff = [], 
     i = 0; 

    for (i = 0; i < a1.length; i++) { 
     a[a1[i]] = true; 
    } 

    for (i = 0; i < a2.length; i++) { 
     if (a[a2[i]]) { 
     delete a[a2[i]]; 
     } else { 
     a[a2[i]] = true; 
     } 
    } 

    $.each(a, function(k, v) { 
     diff.push(k); 
    });  

    return diff[0]; 
    } 

    $("#sortable1, #sortable2").sortable({ 
    connectWith: ".connectedSortable", 
    start: function(e, ui) { 
     // Start of Sort Order 
     items.pre[1] = $('#sortable1').sortable('toArray') 
     items.pre[2] = $('#sortable2').sortable('toArray') 
     log(e.type); 
    }, 
    update: function(e, ui) { 
     // End of Sort Order 
     items.post[1] = $('#sortable1').sortable('toArray'); 
     items.post[2] = $('#sortable2').sortable('toArray'); 
     log(e.type); 
     /* 
     $.ajax({ 
     type: "POST", 
     url: "/echo/json/", 
     data: "order1=" + order1 + "&order2=" + order2, 
     dataType: "json", 
     success: function(data) {} 
     }); 
     */ 
     var newItem1 = determineChange(items.pre[1], items.post[1]); 
     console.log(newItem1); 
    } 
    }).disableSelection(); 

    // Activation Order 
    items.act[1] = $('#sortable1').sortable('toArray'); 
    items.act[2] = $('#sortable2').sortable('toArray'); 

    log(); 
}); 

：JavaScript array difference

工作实例。将每个零件存储在对象中只是简化了收集所有信息的过程。

唯一要注意的是更新运行2次。当一个项目从列表1中删除时，out并添加到列表2中，receive。它最终没有什么不同，但为了以防万一，需要注意。