JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<div id="cardPiles">
  <div id="D1" class="draggable ui-widget-content" data-origin="">1</div>
  <div id="D2" class="draggable ui-widget-content" data-origin="">2</div>
  <div id="D3" class="draggable ui-widget-content" data-origin="">3</div>
  <div id="D4" class="draggable ui-widget-content" data-origin="">4</div>
  <div id="D5" class="draggable ui-widget-content" data-origin="">5</div>
  <div id="D6" class="draggable ui-widget-content" data-origin="">6</div>
</div>
<div id="cardDrop">

</div>

CSS

.draggable,
.dropped {
  width: 50px;
  height: 50px;
  padding: 0.5em;
  margin: 3px auto;
}

#cardPiles {
  background: #fcc;
  border: 2px groove #fee;
  min-height: 80px;
  width: 100px;
  padding: 5px;
  float: left;
}

#cardDrop {
  background: #ccf;
  border: 2px groove #eef;
  width: 100px;
  padding: 5px;
  float: left;
  min-height: 80px;
  margin: 0 20px;
}

JavaScript

function rev(me) {
  console.log("DoubleClick Detected.");
  var pos = me.data("origin");
  console.log("Returning to: ", pos);
  var $o = me.clone();
  $o.draggable({
    cursor: "move",
    start: log
  });
  me.remove();
  if ($("#cardPiles div").length == 0) {
    $("#cardPiles").append($o);
    return true;
  }
  $("#cardPiles .draggable").each(function(k, v) {
    var txt = parseInt($(v).text());
    if ($o.data("order") < txt) {
      $(v).before($o);
      return false;
    } else {
      $("#cardPiles").append($o);
    }
  });

}

function log(e, ui) {
  var pos = ui.offset;
  var $ob = $("#" + ui.helper.attr("id"));
  pos.order = parseInt(ui.helper.text());
  $ob.attr("data-top", pos.top);
  $ob.attr("data-left", pos.left);
  $ob.attr("data-order", pos.order);
  $ob.attr("data-origin", [pos.top, pos.left, pos.order].join(","));
  console.log("DragStart Position: ", pos);
  console.log("Logged: " + [$ob.data("top"), $ob.data("left"), $ob.data("order")].join(","));
}

$(function() {
  $(".draggable").draggable({
    cursor: "move",
    start: log
  });
  $("#cardDrop").on("dblclick", ".dropped", function() {
    console.log("Origin found: ", $(this).data("origin"), $(this).data("top"));
    rev($(this));
  });
  $("#cardDrop").droppable({
    accept: "#cardPiles div",
    activeClass: "ui-state-highlight",
    drop: function(e, ui) {
      var $drop = ui.draggable.clone();
      console.log("Dropped. Origin: ", $drop.data("origin"));
      $drop.removeAttr("style");
      $drop.addClass("dropped");
      $(this).append($drop);
      ui.draggable.remove();
      var c = $("#cardDrop div").length;
    }
  }).sortable({
    revert: true
  });
});