draggableElement.js

function draggableElement({ elementId }) {
  const element = document.getElementById(elementId);
  const positions = {
    pos1: 0,
    pos2: 0,
    pos3: 0,
    pos4: 0,
  };

  element.onmousedown = mouseDown;

  function mouseDown(e) {
    const event = e || window.event;
    event.preventDefault();

    // get mouse cursor position at startup:
    positions.pos3 = event.clientX;
    positions.pos4 = event.clientY;

    document.onmouseup = mouseReleased;
    document.onmousemove = mouseDrag;
  }

  function mouseDrag(e) {
    const event = e || window.event;
    event.preventDefault();

    // calculate new cursor position
    positions.pos1 = positions.pos3 - event.clientX;
    positions.pos2 = positions.pos4 - event.clientY;
    positions.pos3 = event.clientX;
    positions.pos4 = event.clientY;

    // set new position for the element
    element.style.top = element.offsetTop - positions.pos2 + 'px';
    element.style.left = element.offsetLeft - positions.pos1 + 'px';
  }

  function mouseReleased() {
    // stop moving when mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

export default draggableElement;