JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<body>

  <div class="droppable" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

  <div class="draggable" id="drag1"  draggable="true" ondragstart="drag(event)"</div>

</body>

CSS

.droppable {
  width: 400px;
  height: 300px;
  padding: 10px;
  border: 1px solid #aaaaaa;
  background:lightgreen;
}
.draggable{
  width:300px;
  height:200px;
  background:lightblue;
  border:1px solid #ddd;
}

JavaScript

function allowDrop(ev) {
  ev.preventDefault();
}
function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("Text");
  alert(data);
  ev.target.appendChild(document.getElementById(data));
}