issue.xpub.nl/12/dragable.js

   
    function makeDragable(dragHandle, dragTarget) {
  let dragObj = null; //object to be moved
  let xOffset = 0; //used to prevent dragged object jumping to mouse location
  let yOffset = 0;

  document.querySelector(dragHandle).addEventListener("mousedown", startDrag, true);
  document.querySelector(dragHandle).addEventListener("touchstart", startDrag, true);

  /*sets offset parameters and starts listening for mouse-move*/
  function startDrag(e) {
    e.preventDefault();
    e.stopPropagation();
    dragObj = document.querySelector(dragTarget);
    dragObj.style.position = "absolute";
    let rect = dragObj.getBoundingClientRect();

    if (e.type=="mousedown") {
      xOffset = e.clientX - rect.left; //clientX and getBoundingClientRect() both use viewable area adjusted when scrolling aka 'viewport'
      yOffset = e.clientY - rect.top;
      window.addEventListener('mousemove', dragObject, true);
    } else if(e.type=="touchstart") {
      xOffset = e.targetTouches[0].clientX - rect.left;
      yOffset = e.targetTouches[0].clientY - rect.top;
      window.addEventListener('touchmove', dragObject, true);
    }
  }

  /*Drag object*/
  function dragObject(e) {
    e.preventDefault();
    e.stopPropagation();

    if(dragObj == null) {
      return; // if there is no object being dragged then do nothing
    } else if(e.type=="mousemove") {
      dragObj.style.left = e.clientX-xOffset +"px"; // adjust location of dragged object so doesn't jump to mouse position
      dragObj.style.top = e.clientY-yOffset +"px";
    } else if(e.type=="touchmove") {
      dragObj.style.left = e.targetTouches[0].clientX-xOffset +"px"; // adjust location of dragged object so doesn't jump to mouse position
      dragObj.style.top = e.targetTouches[0].clientY-yOffset +"px";
    }
  }

  /*End dragging*/
  document.onmouseup = function(e) {
    if (dragObj) {
      dragObj = null;
      window.removeEventListener('mousemove', dragObject, true);
      window.removeEventListener('touchmove', dragObject, true);
    }
  }
}

makeDragable('#shell_03header', '#shell_03')







   
    function makeDragable2(dragHandle2, dragTarget2) {
  let dragObj2 = null; //object to be moved
  let xOffset2 = 0; //used to prevent dragged object jumping to mouse location
  let yOffset2 = 0;

  document.querySelector(dragHandle).addEventListener("mousedown", startDrag, true);
  document.querySelector(dragHandle).addEventListener("touchstart", startDrag, true);

  /*sets offset parameters and starts listening for mouse-move*/
  function startDrag(x) {
    e.preventDefault();
    e.stopPropagation();
    dragObj2 = document.querySelector(dragTarget);
    dragObj2.style.position = "absolute";
    let rect = dragObj2.getBoundingClientRect();

    if (x.type=="mousedown") {
      xOffset2 = x.clientX - rect.left; //clientX and getBoundingClientRect() both use viewable area adjusted when scrolling aka 'viewport'
      yOffset2 = x.clientY - rect.top;
      window.addEventListener('mousemove', dragObject2, true);
    } else if(e.type=="touchstart") {
      xOffset2 = x.targetTouches[0].clientX - rect.left;
      yOffset2 = x.targetTouches[0].clientY - rect.top;
      window.addEventListener('touchmove', dragObject2, true);
    }
  }

  /*Drag object*/
  function dragObject(x) {
    x.preventDefault();
    x.stopPropagation();

    if(dragObj == null) {
      return; // if there is no object being dragged then do nothing
    } else if(x.type=="mousemove") {
      dragObj2.style.left = x.clientX-xOffset2 +"px"; // adjust location of dragged object so doesn't jump to mouse position
      dragObj2.style.top = x.clientY-yOffset2 +"px";
    } else if(e.type=="touchmove") {
      dragObj2.style.left = x.targetTouches[0].clientX-xOffset2 +"px"; // adjust location of dragged object so doesn't jump to mouse position
      dragObj2.style.top = x.targetTouches[0].clientY-yOffset2 +"px";
    }
  }

  /*End dragging*/
  document.onmouseup = function(x) {
    if (dragObj2) {
      dragObj2 = null;
      window.removeEventListener('mousemove', dragObject, true);
      window.removeEventListener('touchmove', dragObject, true);
    }
  }
}

makeDragable2('#week_05header', '#week_05')