JSFiddle - React, Tailwind, and code Playground

by TrevorBurnham

HTML

<div id="wrapper"><div id="block" draggable=true></div></div>

CSS

#wrapper {
  display: inline-block;
  padding: 10px;  
  background: cyan;
}
[draggable] {
  width: 100px;
  height: 100px;
  border: 1px solid #222;
  background: #eee;    
}

JavaScript

document.getElementById('block').addEventListener('dragstart', function(e) {
  e.dataTransfer.setData('text/html', this.innerHTML);  // so drag image appears in Firefox
  console.log('dragstart');
});