JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
  <div ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" class="dragtargetblock" id="dragtarget1">Drag me1</div>
  <div ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" class="dragtargetblock" id="dragtarget2">Drag me2</div>
</div>

<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
  <div ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" class="dragtargetblock" id="dragtarget3">Drag me3</div>
  </div>

<p id="demo"></p>

CSS

.droptarget {
    width: 100%;
    height: auto;
    margin: 10px;
    padding: 0 10px;
    border: 1px solid #aaaaaa;
    min-height: 20px;
}

.dragtargetblock {
    background: #cccccc;
    padding: 2px 10px;
    margin: 10px 0;
}

.dragtargetblock > .dragtargetblock {
    border: 1px solid #ffffff;
    margin: 10px;
}

JavaScript

function dragStart(event) {
  event.dataTransfer.setData("Text", event.target.id);
}

function dragging(event) {
  document.getElementById("demo").innerHTML = "The p element is being dragged";
}

function allowDrop(event) {
  event.preventDefault();
}

function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("Text");
  event.target.appendChild(document.getElementById(data));
  document.getElementById("demo").innerHTML = "The p element was dropped";
}