JSFiddle - React, Tailwind, and code Playground

by TrevorBurnham

HTML

<div id="draggable" draggable=true>Drag me</div>
<div id="dragTarget">Drag here</div>

CSS

#draggable {
  cursor: move;
  padding: 10px;
  background: cyan;
  display: inline-block;
}
#dragTarget {
  padding: 10px;
  border: 1px dashed #333;
  display: inline-block;  
}

JavaScript

var draggable = document.getElementById('draggable');
var dragTarget = document.getElementById('dragTarget');

draggable.addEventListener('dragstart', function(e) {
  console.log('dragstart');
  e.dataTransfer.setData('text/html', 'foo');
});

dragTarget.addEventListener('dragenter', function(e) {
  console.log(e.relatedTarget); 
});