JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="dvSource">
  <img src="http://placehold.it/100x100">
  <img src="http://placehold.it/200x200">
  <img src="http://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() {
  $("#dvSource img").draggable({
    revert: "invalid",
    drag: function(event, ui) {
      ui.helper.addClass("draggable");
    },
    stop: function(event, ui) {
      ui.helper.removeClass("draggable");
      if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {
        console.log($("#dvDest img").length);
      }
    }
  });
  $("#dvDest").droppable({
    drop: function(event, ui) {
      if ($("#dvDest img").length === 0) {
        $("#dvDest").html("");
      } else {
        $("#dvDest img:first").hide(600, function() {
          $(this).appendTo("#dvSource");
        }).show(600);
      }
      ui.draggable.addClass("dropped");
      $("#dvDest").append(ui.draggable);
    }
  });
});