Drag and move element

by Sasabee

HTML

<body>
  <div class="box"></div>
</body>

CSS

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  background-color: #1B1C1E;
  overflow: hidden;
}
.box {
  background-color: #FDFF3A;
  width: 50px;
  height: 50px;
}

JavaScript

const el = document.querySelector('.box');
el.addEventListener('mousedown', (e)=>{
	el.style.position || (el.style.position = 'absolute');
	const targetRect = e.target.getBoundingClientRect();
	const gapX = e.clientX - targetRect.left;
	const gapY = e.clientY - targetRect.top;

	const mousemoveCallback = (e)=>{
		el.style.left = (e.pageX - gapX) + 'px';
		el.style.top = (e.pageY - gapY) + 'px';
	};

	const mouseupCallback = (e)=>{
		document.removeEventListener('mousemove', mousemoveCallback);
		el.removeEventListener('mouseup', mouseupCallback);
	};

	document.addEventListener('mousemove', mousemoveCallback);
	el.addEventListener('mouseup', mouseupCallback);
});