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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="column1">
  <p>Items</p>
  <div class="dragItem">Drag me ONE</div>
</div>
<div id="column2" class="droppable">
  <p>Drop here</p>
</div>

CSS

#column1,
#column2 {
  width: 250px;
  margin-right: 10px;
  border: 1px solid red;
  float: left
}

.droppable div {
  border: 1px solid blue;
  margin: 5px;
  padding: 5px;
}

.highlight {
  border: 1px dotted #000 !important;
}

JavaScript

$(function() {

  var $template = $("<div class='static'>Box 1</div><div class='droppable-box-nested'>Box 2</div>");

  $('.dragItem').draggable({
    helper: 'clone',
    connectToSortable: "#column2,#column2 div"
  });

  $('.dragItem').sortable({
    containment: "parent"
  });

  $('#column2').sortable({
    placeholder: "highlight"
  });

  $('#column2').droppable({
    accept: '.dragItem',
    drop: function(event, ui) {
      var draggable = ui.draggable;

      var droppable = $(this);
      var drag = $('#column2').has(ui.draggable).length ? draggable : draggable.clone().draggable({});
      drag.appendTo(column2);
      $template.insertAfter(drag);
      drag.sortable({
        placeholder: "highlight"
      });
      drag.droppable({
        accept: ".dragItem",
        drop: function(event, ui) {
          var draggable = ui.draggable;
          var droppable = $(this);
          var drag = $('#column2').has(ui.draggable).length ? draggable : draggable.clone().draggable({});
        }
      })
      drag.css({
        width: '',
        height: ''
      })
    }
  });
});