JSFiddle - React, Tailwind, and code Playground

by Will L

HTML

<div class="node">
    <div class="node">-_-_-_-_</div>  
    <div class="node">-----</div>
    <div class="node">)))))</div>    
    <div class="node">item</div>  
    <div class="node">hello</div>  
    <div class="node">nalskdf</div>  
</div>

CSS

.node {
    border: 1px solid black;
    padding: 10px;
    margin: 5px;
}

JavaScript

$(document).ready(function(){
  $(".node").sortable();
  $(".node").droppable(
    {
      greedy: true,
      drop: function(event, ui){
        var dropped = ui.draggable;
        var droppedOn = $(this);
        dropped.remove();
        droppedOn.append("<div class=\"node\">" + dropped.html() + "</div>");
      }
    }
  );
});