JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<div class="ui-helper-clearfix">
  <ul id="sortable" class="reorder-gallery mt-5">
    <li class="ui-state-default mediaSort" id="item-1" data-name="1.png">
      <img src="https://dummyimage.com/100x100/cecece/2e2e2e.jpg&text=Item+1" alt="Item 1">
    </li>
    <li class="ui-state-default mediaSort" id="item-2" data-name="2.png">
      <img src="https://dummyimage.com/100x100/cecece/2e2e2e.jpg&text=Item+2" alt="Item 2">
    </li>
    <li class="ui-state-default mediaSort" id="item-3" data-name="3.png">
      <img src="https://dummyimage.com/100x100/cecece/2e2e2e.jpg&text=Item+3" alt="Item 3">
    </li>
    <li class="ui-state-default mediaSort" id="item-4" data-name="4.png">
      <img src="https://dummyimage.com/100x100/cecece/2e2e2e.jpg&text=Item+4" alt="Item 4">
    </li>
  </ul>
</div>
<div id="log">
</div>

CSS

#sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  #sortable li {
    margin: 0 3px 3px 3px;
    padding: 0.4em;
    padding-left: 1.5em;
    font-size: 1.4em;
    width: 120px;
    float: left;
  }

#log {
  font-size: 80%;
  font-family: sans-serif;
}

#log span {
  display: block;
}

JavaScript

$(function() {
  function myLog(string) {
    $("#log").prepend("<span>" + string + "</span>");
  }

  function doubleClick(event, callback) {
    var touchtime = $(event.target).data("touch-time");
    console.log("DC:", touchtime);
    if (touchtime == undefined || touchtime == 0) {
      // set first click
      $(event.target).data("touch-time", new Date().getTime());
    } else {
      // compare first click to this click and see if they occurred within double click threshold
      if (((new Date().getTime()) - touchtime) < 800) {
        // double click occurred
        console.log("DC Callback triggered");
        callback();
        $(event.target).data("touch-time", 0);
      } else {
        // not a double click so set as a new first click
        $(event.target).data("touch-time", new Date().getTime());
      }
    }
  }

  function removeItem(selector) {
    var item = $(selector);
    var parent = item.parent();
    item.remove();
    parent.sortable("refresh");
  }

  $("#sortable").sortable({
    axis: 'x,y',
    containment: "parent",
    tolerance: 'pointer',
    update: function(event, ui) {
      var item_order = $(this).sortable("toArray");
      myLog("Array Created: " + item_order.toString());
      $.ajax({
        type: "POST",
        url: "processes/sort.php",
        data: {
          list: "gallery",
          order: item_order
        },
        cache: false,
        success: function(data) {
          myLog("Success");
        }
      });
    }
  }).disableSelection();

  // DOUBLE CLICK TO DELETE IMAGE (NOT WORKING)
  /*
  $(".mediaSort").dblclick(function(event) {
    console.log("Double Click Detected");
    myLog("Double Click " + $(this).attr("id"));
  });
  */
  $(".mediaSort").click(function(e) {
    console.log(new Date().getMilliseconds());
    var self = $(this).get(0);
    doubleClick(e, function() {
      myLog("Remove Item: " + $(self).attr("id"));
      removeItem(self);
    });
  });
});