JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="dvSource">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/200x200">
  <img src="https://placehold.it/300x300">
</div>
<hr />
<div id="dvDest">
</div>

CSS

body {
  font-family: Arial;
  font-size: 10pt;
}

img {
  height: 100px;
  width: 100px;
  margin: 2px;
}

.draggable {
  filter: alpha(opacity=60);
  opacity: 0.6;
}

.dropped {
  position: static !important;
}

#dvSource,
#dvDest {
  border: 5px solid #ccc;
  padding: 5px;
  min-height: 100px;
  width: 430px;
}

JavaScript

function makeDrag(el) {
  // Pass me an object, and I will make it draggable
  el.draggable({
    revert: "invalid"
  });
}
$(function() {

  makeDrag($("#dvSource img"));

  $("#dvDest").droppable({
    drop: function(event, ui) {
      if ($("#dvDest img").length === 0) {
        $("#dvDest").html("");
      } else {
        $("#dvDest img:first").hide(600, function() {
          $(this).removeAttr("class");
          $(this).removeAttr("style");
          $(this).appendTo("#dvSource");
        }).show(600, function() {
          makeDrag($(this));
        });
      }
      ui.draggable.addClass("dropped");
      ui.draggable.draggable("destroy");
      $("#dvDest").append(ui.draggable);
    }
  });
});