javascript - 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列的顺序。但是，我想知道已更改的单个项目。 就像在下图中，我将 Item3 从第 1 列拖到第 2 列。我想要获得类似的输出 - Item3_before=Column1,Item3_after=Column2。

在上面的javascript代码中，通过像update事件一样使用start事件，我们可以获取元素的Before状态，但不能获取单个元素；它给出了所有元素之前的状态。

Answer 1

需要采取几个步骤。我设置了一个对象来存储两个列表的激活、预排序和后排序时的值。完成后，我使用此方法来确定差异: JavaScript array difference

工作示例: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();
});

将它们保留为数组可以使比较和操作变得更加容易。将每个部分存储在一个对象中可以更轻松地收集所有信息。

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