JSFiddle - React, Tailwind, and code Playground

HTML

<div draggable="true">one</div>
<div draggable="true">two</div>

CSS

div {
  background: blue;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
div:first-of-type { background: red; }

JavaScript

(function() {
  function dragenter(e) {
    if (this === dragger) return;
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    console.log(e.type, e.dataTransfer.dropEffect);
  }
  function dragleave(e) {
    if (this === dragger) return;
    e.dataTransfer.dropEffect = 'none';
    console.log(e.type, e.dataTransfer.dropEffect);
  }
  function dragstart(e) {
    dragger = e.target;
    e.dataTransfer.effectAllowed = 'copyMove';
  }
  function drop(e) {
    e.stopPropagation();
    console.log(e.type, e.dataTransfer.dropEffect);
  }
  function dragend(e) {
    console.log(e.type, e.dataTransfer.dropEffect);
  }
  var dragger, d = document.querySelectorAll('div');
  Array.prototype.forEach.call(d, function(el) {
    el.addEventListener('dragstart', dragstart);
    el.addEventListener('dragenter', dragenter);
    el.addEventListener('dragover', dragenter);
    el.addEventListener('dragleave', dragleave);
    el.addEventListener('drop', drop);
    el.addEventListener('dragend', dragend);
  });
}());