JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div id="s"></div>

CSS

body {
  margin: 0;
}

#s {
  width: 500px;
  height: 200px;
  background: #000;
}

#r {
  font-size: 18px;
}

JavaScript

var state = {
	draggable: false,
  x: 0,
  y: 0,
  px: 0,
  py: 0
}

var down = function(e) {
	state.draggable = true;
  state.x = e.clientX - state.px;
  state.y = e.clientY - state.py;
},
move = function(e) {
	if (state.draggable) {
    state.px = e.clientX - state.x;
 		state.py = e.clientY - state.y;
    s.style.transform = 'translateX('+(state.px)+'px) translateY('+(state.py)+'px)'
  }
},
end = function(e) {
	state.draggable = false;
  state.x = e.clientX - state.px;
  state.y = e.clientY - state.py;
}

s.onmousedown = down;
document.onmousemove = move;
document.onmouseup = end;

s.ontouchstart = down;
document.ontouchmove = move;
document.ontouchend = end;