JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<div id="one">
</div>

CSS

div {
  height: 50px;
  width: 50px;
  border: 1px solid #ccc;
  background: red;
}

JavaScript

window.onload = function() {

  draggable('one');

};

var dragObj = null;

function draggable(id) {
  var obj = document.getElementById(id);
  obj.style.position = "absolute";
  obj.onmousedown = function() {
    dragObj = obj;
  }
}

document.onmouseup = function(e) {
  dragObj = null;
};

document.onmousemove = function(e) {
  var x = e.pageX;
  var y = e.pageY;

  if (dragObj == null)
    return;

  dragObj.style.left = x + "px";
  dragObj.style.top = y + "px";
};