Draggable JS semi-working

Design help Animations & Interactions
1

Hi friends, quick disclaimer I am extremely new to all this so forgive any dumb questions. Also i have not configured breakpoints yet so you’ll need to view it large.

Background: I am working on a desktop UI inspired site with draggable div “windows”. The simple instructions from this post have gotten me most of the way there allowing me to define desktop-wrapper (whole screen) as the #outerContainer, desktop-container (below the toolbar) as the #container, and the foremost window as #item.

The issues i’m having are twofold:

  1. As reader-window is entirely covered by its two child elements reader-toolbar and reader-body, I cannot seem to drag it unless i clear a “hit box” by moving those children out of the way so you can directly click on reader-window (as you can see is that empty margin above the red toolbar). Is there any way to have it register input even if its behind another element?

  2. Ultimately I would like to have every window on the desktop draggable in this way, i think that pertains to this line of the script but trying to include multiple IDs “#item1, #item2” only works with the first one. i tried querySelectorAll but that seems to not work for any. ideas?

    var dragItem = document.querySelector("#item");

EDIT: tried to update the Selector to an entire class (“.window”) to see if that would solve the issue but it only works on the first .window element

Here is my public share link: LINK
Published link for scripts: LINK
(how to access public share link)

2

I’ve found another approach using dragElement from this example. Registers clicks anywhere on the DIV or its children, and allows me to define multiple IDs.

Unfortunately, unlike the other script, it doesn’t allow for touch input. Is anyone aware how I could address that? Code below:

<script>
//Make the DIV element draggagle:
dragElement(document.getElementById("item"));
dragElement(document.getElementById("item1"));
dragElement(document.getElementById("item2"));
dragElement(document.getElementById("item3"));

  
function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "window-toolbar")) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id + "window-toolbar").onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
  </script>