JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default" id='item_1'>Item 1</li>
  <li class="ui-state-default" id='item_2'>Item 2</li>
  <li class="ui-state-default" id='item_3'>Item 3</li>
  <li class="ui-state-default" id='item_4'>Item 4</li>
  <li class="ui-state-default" id='item_5'>Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight" id='item_6'>Item 6</li>
  <li class="ui-state-highlight" id='item_7'>Item 7</li>
  <li class="ui-state-highlight" id='item_8'>Item 8</li>
  <li class="ui-state-highlight" id='item_9'>Item 9</li>
  <li class="ui-state-highlight" id='item_10'>Item 10</li>
</ul>

CSS

#sortable1,
  #sortable2 {
    border: 1px solid #eee;
    width: 142px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
  }
  
  #sortable1 li,
  #sortable2 li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
  }

JavaScript

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

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