JSFiddle - React, Tailwind, and code Playground

HTML

</head>
<div id="columns">
  <div class="column" draggable="true" ><header>A</header></div>
  <div class="column" draggable="true" ><header>B</header></div>
  <div class="column" draggable="true" ><header>C</header></div>
  <div class="column" draggable="true" ><header>D</header></div>

  
</div>

CSS

body {
}
/* Prevent the text contents of draggable elements from being selectable. */
[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}
.column {
  height: 150px;
  width: 150px;
  float: left;
  border: 2px solid #666666;
  background-color: #ccc;
  margin-right: 5px;
  -webkit-border-radius: 10px;
  -ms-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 3px #000;
  -ms-box-shadow: inset 0 0 3px #000;
  box-shadow: inset 0 0 3px #000;
  text-align: center;
  cursor:pointer;
}
.column header {
  color: #fff;
  text-shadow: #000 0 1px;
  box-shadow: 5px;
  padding: 5px;
  background: -moz-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
  background: -webkit-gradient(linear, left top, right top,
                               color-stop(0, rgb(0,0,0)),
                               color-stop(0.50, rgb(79,79,79)),
                               color-stop(1, rgb(21,21,21)));
  background: -webkit-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
  background: -ms-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
  border-bottom: 1px solid #ddd;
  -webkit-border-top-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -ms-border-radius-topleft: 10px;
  border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -ms-border-top-right-radius: 10px;
  -moz-border-radius-topright: 10px;
  border-top-right-radius: 10px;
}
.over
{
   border-left:2px dashed #000;   
}

JavaScript

var dragSrc = null;
function handleDragStart(e) {
    dragSrc = this;
    e.originalEvent.dataTransfer.effectAllowed = "move";
    e.originalEvent.dataTransfer.setData("text/html", this.innerHTML);
}
function handleDragOver(e) {
     if (e.preventDefault) {
         e.preventDefault();
     }
     $(this).addClass("over");
    e.originalEvent.dataTransfer.dropEffect = "move";
}
function handleDragEnter(e) {
    $(this).addClass("over");
}
function handleLeave(e) {
    $(this).removeClass("over");
}
function handleDrop(e) {
//      if (e.stopPropagation) {
//          e.stopPropagation();
//      }
    if (dragSrc != this) {
        $(this).after($(this).clone());
     // alert("1");
        this.innerHTML = e.originalEvent.dataTransfer.getData("text/html");
     //   alert("2");
        $(dragSrc).remove();
     //   $(this).removeClass("over");
    }
}
function handleDragEnd(e) {
    $(".column").removeClass("over");
   // alert("3");
}
$(document).ready(function () {
//      $(".column").on("dragstart", handleDragStart);
//      $(".column").on("dragenter", handleDragEnter);
//      $(".column").on("dragover", handleDragOver);
//      $(".column").on("dragleave", handleLeave);
    //      $(".column").on("drop", handleDrop);
    //    $(".column").on("dragend", handleDragEnd);
    $("#columns").on("dragstart", ".column", handleDragStart);
    $("#columns").on("dragenter", ".column", handleDragEnter);
    $("#columns").on("dragover", ".column", handleDragOver);
    $("#columns").on("dragleave", ".column", handleLeave);
    $("#columns").on("drop", ".column", handleDrop);
    $("#columns").on("dragend", ".column", handleDragEnd);
});