JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="drag_items">
  <div id="dragItem_1" class="box">#dragItem_1</div>
  <div id="dragItem_2" class="box">#dragItem_2</div>
  <div id="dragItem_3" class="box">#dragItem_3</div>
  <div id="dragItem_4" class="box">#dragItem_4</div>
</div>
<div class="drop_items">
  <div id="dropTarget_1" class="box">#dropTarget_1</div>
  <div id="dropTarget_2" class="box">#dropTarget_2</div>
  <div id="dropTarget_3" class="box">#dropTarget_3</div>
  <div id="dropTarget_4" class="box">#dropTarget_4</div>
</div>

CSS

.box {
  border: 2px solid red;
  display: inline-block;
  padding: .5em;
}

.drag_items {
  padding: 1em;
}

.drop_items {
  padding: 1em;
}

.drag_items .box {
  background: #ccc;
}

.drop_items .box {
  background: #222;
  color: #fff;
}

JavaScript

$(function() {
  $(".drop_items .box").droppable({
    accept: ".none",
    drop: function(event, ui) {
      var dropped = ui.draggable;
      var droppedOn = $(this);
      $(this).addClass("c-drop-target--correct").droppable("disable");
      dropped.detach().css({
        top: 0,
        left: 0
      }).appendTo(droppedOn).draggable("disable");
    }
  });

  $(".drag_items .box").draggable({
    revert: "invalid",
    start: function(e, ui) {
      var item = ui.helper.attr("id")
      var target = "#dropTarget_" + item.slice(-1);
      console.log("Setting 'accept' for " + target + " to '#" + item + "'");
      $(target).droppable("option", "accept", "#" + item);
    }
  });
});