moosetraveller/draggable-panel.md

## draggable-panel.md

      
    Raw
  

              draggable-panel.md
            
          
    Make Panel Draggable

HTML

<div id="panelContainer">
    <div id="panelTitle">Title</div>
    <div id="panelBody">Body</div>
</div>
CSS

#panelContainer {
  position: fixed;
}
#panelTitle {
  cursor: move;
}
JavaScript

const panelContainer = document.getElementById("panelContainer");
const panelTitle = document.getElementById("panelTitle");

panelTitle.addEventListener("mousedown", dragStartEvent => {

  dragStartEvent.preventDefault();

  let x = dragStartEvent.clientX;
  let y = dragStartEvent.clientY;

  const onDrag = dragEvent => {

    dragEvent.preventDefault();

    const relX = x - dragEvent.clientX;
    const relY = y - dragEvent.clientY;

    x = dragEvent.clientX;
    y = dragEvent.clientY;

    panelContainer.style.top = `${panelContainer.offsetTop - relY}px`;
    panelContainer.style.left = `${panelContainer.offsetLeft - relX}px`;

  };

  const onDragFinished = _ => {
    document.removeEventListener("mouseup", onDragFinished);
    document.removeEventListener("mousemove", onDrag);
  }

  document.addEventListener("mouseup", onDragFinished);
  document.addEventListener("mousemove", onDrag);

});
No results found