JSFiddle - React, Tailwind, and code Playground

by Asif Sharif Shahid

HTML

<div style="height:500px;width:500;background-color:green;">
  <div id="dxy" style="width:100px; background-color:red">test</div>
</div>

<div style="height:500px;width:500;background-color:green;">
  <div id="dxy" style="width:100px; background-color:red">test</div>
</div>
<div style="height:500px;width:500;background-color:green;">
  <div id="dxy" style="width:100px; background-color:red">test</div>
</div><div style="height:500px;width:500;background-color:green;">
  <div id="dxy" style="width:100px; background-color:red">test</div>
</div>

JavaScript

window.onload = addListeners();
var x_pos = 0,
  y_pos = 0;

function addListeners() {
  document.getElementById('dxy').addEventListener('mousedown', mouseDown, false);
  window.addEventListener('mouseup', mouseUp, false);
}

function mouseUp() {
  window.removeEventListener('mousemove', divMove, true);
}

function mouseDown(e) {
  var div = document.getElementById('dxy');
  x_pos = e.clientX - div.offsetLeft;
  y_pos = e.clientY - div.offsetTop;
  window.addEventListener('mousemove', divMove, true);
}

function divMove(e) {
  var div = document.getElementById('dxy');
  div.style.position = 'absolute';
  div.style.top = (e.clientY - y_pos) + 'px';
  div.style.left = (e.clientX - x_pos) + 'px';
}