JSFiddle - React, Tailwind, and code Playground

by Jake Wolpert

HTML

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<ul>
  <li class=drag-able>foo</li>
  <li class=drag-able>bar</li>
  <li class=drag-able>baz</li>
  <li class=drag-able>blech</li>
</ul>

<ul class=drop-able>
</ul>

CSS

ul {
  min-height: 20px;
  background: orange
}

JavaScript

$(".drag-able").draggable({
  appendTo: "body",
  cursor: "move",
  helper: "clone",
  revert: true,
  revertDuration: 0
});

$(".drop-able").droppable({
  tolerance: 'pointer',
  drop: function(event, ui) {
    $(this).append(ui.draggable.clone());
  },
});