JSFiddle - React, Tailwind, and code Playground

HTML

<div id="init">
  <div id="new1" class="block">Drag me</div>
  <div id="new2" class="block">Drag me</div>
  <div id="new3" class="block">Drag me</div>
</div>

<div class="list">
  <div class="block">Sort me</div>
  <div class="block">Sort me</div>
</div>

<div id="helper"></div>

CSS

.ui-draggable { margin: 0.5em; border: 1px solid silver; padding: 0.3em; width: 200px; height: 15px; }
.ui-draggable-dragging { border: 1px solid gray; padding: 0.3em; background: #eee; }
.dynamic { background: lightYellow; width: 100px; height: 130px; }
  .list{padding:15px; margin: 10px;border:2px solid black;}
  .block{padding: 10px; display:block; border: 1px solid gray; cursor: move}

JavaScript

$( "#init .block" ).draggable({
  helper: "clone",
  connectToSortable: ".list"
});

$(".list").sortable({
  connectWith: ".list",
  receive: function(event,ui) {
      $(newItem).css("color","cyan");     
  },
  beforeStop: function (event, ui) { 
      newItem = ui.item;
  }
});