Plain JS DnD

by balefrost

HTML

<style>
  .draggable {
    position:absolute; 
    background-color: pink; 
    height: 200px; 
    width: 100px;
    cursor: pointer; 
  }
</style>

<div class="draggable">
</div>

JavaScript

const box = document.querySelector('.draggable');

box.addEventListener("mousedown", (start) => {
	const moveListener = (move) => {
  	box.style.left = `${move.clientX - start.offsetX}px`;
  	box.style.top = `${move.clientY - start.offsetY}px`;
    move.preventDefault();
  };
  const upListener = () => {
  	document.removeEventListener("mousemove", moveListener);
		box.removeEventListener("mouseup", upListener);
  };
	document.addEventListener("mousemove", moveListener);
	box.addEventListener("mouseup", upListener);
});