jQuery UI Sortable Connected Lists - Get Changed Status

Question

I'm implementing sortable plugin of jQuery UI. There are two columns and we can drag and drop an element from one column to another column. I have the following javascript code:

$(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();
 });

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

From above javascript, I can get the order of column 1 and column 2 after change as a whole. However, I would like to know the individual item that has been changed. Like, in this image below, I have Item3 dragged from Column 1 to Column 2. I want to get output like - Item3_before=Column1,Item3_after=Column2.

In the javascript code above, by using start event like the update event, we can get the Before status of the elements, but not the individual element; it gives before status of all elements.

Answer 1

Few steps to take. I setup an Object to store the values at Activation, Pre-Sorting, and Post-Sorting for both lists. Once that was done, I used this method to determine the difference: JavaScript array difference

Working Example: 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();
});

Leaving them as Arrays makes it a lot easier to compare and manipulate. Storing each part in an object simply makes it easier to gather all the info.

The only thing to be mindful of is that update runs 2 times. When an item is removed from list 1, out and added to list 2, receive. It does not make a difference in the end, but it's something to be mindful of just in case.