How to Create a Draggable Div in JavaScript

<div id="dragable">  <header id="dragzone">   <!-- add any information-->  </header></div>

* {margin: 0;padding: 0;border: none;box-sizing: border-box;-webkit-tap-highlight-color: transparent;}html,body {height: 100%;}body {background: #78c7ed;font-family: sans-serif;}#dragable {width: 21rem;height: 21rem;border: 0.2rem solid #0f2c65;border-radius: 0.2rem;position: absolute;z-index: 9;box-shadow: 2px 4px 18px rgba(0, 0, 0, 0.2);transition: border-color 0.2s, box-shadow 0.2s;}#dragable.drag {border-color: white;box-shadow: 3px 6px 24px rgba(0, 0, 0, 0.5);}#dragable #dragzone {width: 100%;height: 100%;cursor: move;z-index: 10;background-color: #0f2c65;}

const dragElement = (element, dragzone) => {    let pos1 = 0,      pos2 = 0,      pos3 = 0,      pos4 = 0;//MouseUp occurs when the user releases the mouse button    const dragMouseUp = () => {      document.onmouseup = null;//onmousemove attribute fires when the pointer is moving while it is over an element.      document.onmousemove = null;      element.classList.remove("drag");    };    const dragMouseMove = (event) => {      event.preventDefault();//clientX property returns the horizontal coordinate of the mouse pointer      pos1 = pos3 - event.clientX;//clientY property returns the vertical coordinate of the mouse pointer      pos2 = pos4 - event.clientY;      pos3 = event.clientX;      pos4 = event.clientY;//offsetTop property returns the top position relative to the parent      element.style.top = `${element.offsetTop - pos2}px`;      element.style.left = `${element.offsetLeft - pos1}px`;    };    const dragMouseDown = (event) => {      event.preventDefault();      pos3 = event.clientX;      pos4 = event.clientY;      element.classList.add("drag");      document.onmouseup = dragMouseUp;      document.onmousemove = dragMouseMove;    };    dragzone.onmousedown = dragMouseDown;  };  const dragable = document.getElementById("dragable"),    dragzone = document.getElementById("dragzone");  dragElement(dragable, dragzone);