JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div class=".container">
  <div class=".column">
    <div class=".draggable-boxes">
      <div class="draggable"></div>
    </div>
  </div>
  <div class=".column">
    <div class=".droppable-container">
      <div class="droppable"></div>
    </div>
  </div>
</div>

CSS

.container {
  height: 99%;
}

div {
  display: flex;
}

.column {
  flex: 1;
  flex-direction: column;
  margin: 20px;
}

.draggable-boxes {
  flex-direction: column;
  margin: auto;
}

.draggable {
  flex-direction: row;
  margin: 10px;
  min-height: 40px;
  min-width: 200px;
  max-height: 40px;
  max-width: 200px;
  border: 1px solid #fcc;
}

.droppable-container {
  margin: auto;
}

.droppable {
  min-height: 400px;
  min-width: 400px;
  max-height: 400px;
  max-width: 400px;
  border: 1px solid #222;
}

JavaScript

$(function() {
  $(".draggable").draggable({
    revert: true,
    revertDuration: 0,
    containment: ".container",
    grid: [40, 40]
  });

  $(".droppable").droppable({
    accept: ".draggable",
    tolerance: "fit",
    drop: function(event, ui) {
      $(ui.draggable).appendTo($(this));
    }
  });
});