JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-widget">
  <div class="ui-widget-content">
    <ul id="sortable">
      <li id="I1">Item 1</li>
      <li id="I2">Item 2</li>
      <li id="I3">Item 3</li>
      <li id="I4">Item 4</li>
      <li id="I5">Item 5</li>
    </ul>
  </div>
  <div class="ui-widget-header results">
    &nbsp;
  </div>
</div>

JavaScript

$(function() {
  var preChange, postChange;

  function equalArr(a, b) {
    console.log("Compare", a, b);
    var eq = 0;
    $.each(a, function(k, v) {
      if(a[k] != b[k]){
      eq++;
      }
    });
    return (eq ? false : true);
  }

  $("#sortable").sortable({
    start: function(event, ui) {
      preChange = $(this).sortable("toArray");
    },
    stop: function(event, ui) {
      postChange = $(this).sortable("toArray");
      $(".results").html("After change, the list is the " + (equalArr(preChange, postChange) ? "same." : "different."));
    }
  });
})