JSFiddle - React, Tailwind, and code Playground

by tujger

HTML

<div id="dragged" class="dragged">

</div>

CSS

.dragged {
	position: fixed;
	width: 50px;
	height: 50px;
	background-color: cyan;
}

JavaScript

var div = document.getElementById("dragged");

var mousedown = function(e) {
	if(e.button !== 0) return;
  var position = { left: this.offsetLeft, top: this.offsetTop, 
		width: this.offsetWidth, height: this.offsetHeight };
	var offset = [ e.clientX, e.clientY ];
	var moved = false;
	function mouseup(){
		onmouseup.remove();
		onmousemove.remove();
	}
	function mousemove(e){
		var deltaX = e.clientX - offset[0];
		var deltaY = e.clientY - offset[1];
		console.log(deltaX, deltaY);
		if(deltaX || deltaY) {
			moved = true;
			div.style.left = (position.left + deltaX) + "px";
			div.style.top = (position.top + deltaY ) + "px";
			div.style.right = "auto";
			div.style.bottom = "auto";
		}
	}
	var onmouseup = on(window, "mouseup", mouseup);
	var onmousemove = on(window, "mousemove", mousemove);

}
on(div,"mousedown,pointerdown", mousedown);

console.log(div)

function on(node, eventName, callback) {
	var _node = node;
	var _eventNames = eventName.split(/,/);
	var _callback = callback.bind(node);
	for(var i in _eventNames) {
		_node.addEventListener(_eventNames[i], _callback);
	}
	return {
		remove: function() {
			for(var i in _eventNames) {
				_node.removeEventListener(_eventNames[i], _callback);
			}
		}
	}
}