JSFiddle - React, Tailwind, and code Playground

by humanzing

HTML

<div class="movable" onmousedown="move(this)">

</div>

<div class="movable" onmousedown="move(this)">

</div>

CSS

div{
  position: absolute;
  width: 100px;
  height: 100px;
  background: red;
}

JavaScript

var els = document.getElementsByClassName("movable");

Array.prototype.forEach.call(els, function(el) {
    // Do stuff here
    move(el);
});

	var mousePosition;
  var offset = [0,0];
  var div;
  var isDown = false;
function move(el)
{
  el.addEventListener('mousedown', function(e){el_down(e, el)}, true);
  el.addEventListener('mouseup', function(e){el_up(e, el)}, true);
	el.addEventListener('mousemove', function(e){el_move(e , el) }, true);
}
function el_move(e, el)
{
	 if (isDown) {
        mousePosition = {
    
            x : event.clientX,
            y : event.clientY
    
        };
        el.style.left = (mousePosition.x + offset[0]) + 'px';
        el.style.top  = (mousePosition.y + offset[1]) + 'px';
    }
}
function el_down(e, el)
{
	isDown = true;
      offset = [
          el.offsetLeft - e.clientX,
          el.offsetTop - e.clientY
      ];
}
function el_up(e, el)
{
  isDown = false;
 	el.removeEventListener("mousedown", el_down);
 	el.removeEventListener("mouseup", el_up);  
 	el.removeEventListener("mousemove", el_move);
}