JSFiddle - React, Tailwind, and code Playground

by jimkennelly

HTML

<div class="dropbox" ondragover="dragOverHandler(event)"
  ondrop="dropHandler(event)"">Drop here</div>
<div class="dropbox" ondragover="dragOverHandler(event)"
  ondrop="dropHandler(event)" >Or drop here</div>
<p id="src" draggable="true" ondragstart="dragStartHandler(event)">Drag me</p>

CSS

.drag {
    position: absolute;
    float: left;
    width: 100px;
    height: 100px;
    background: grey;
    margin: 5px;
    z-index: 100
}

.b {top: 520px}
.c {left: 520px}
.d {top: 520px;left:520px}

.selected {background-color: #4af;}
.dropbox {
  width:100px; height:60px; margin:2px; background-color:lightgray;
}

JavaScript

function dragStartHandler(e) {
  e.dataTransfer.setData("my_element_id", e.target.id);
}
function dragOverHandler(e) {
  e.preventDefault();
  e.dataTransfer.dropEffect = 'move';
  console.log(e);
  
}
function dropHandler(e) {
  var elementId = e.dataTransfer.getData("my_element_id");
  e.target.appendChild(document.getElementById(elementId));
  console.log('drop');
  
}