JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<div id="drag1" draggable="true"></div>

CSS

#drag1 {
  background: red;
  overflow: hidden;
  width: 200px;
  height: 100px;
  position: fixed;
  cursor: move;
}

JavaScript

document.getElementById('drag1').addEventListener('dragend', function(ev) {
  //console.log(ev);
  document.getElementById('drag1').style.top = (ev.pageY - layer.layerY) + 'px';
  document.getElementById('drag1').style.left = (ev.pageX - layer.layerX) + 'px';
});
var layer = {};
document.getElementById('drag1').addEventListener('mousedown', function(e) {
  layer.layerX = e.layerX;
  layer.layerY = e.layerY;
  e.dataTransfer.effectAllowed = "copyMove";
  //console.log(layer);
});