Prevent scrolling with touch input on mobile website

I'm creating a website that simulates an os (graphically speaking) for my graphic design portfolio - http://dreamstate.graphics/. This means that I need several of my elements to be draggable. Everything is working fine on desktop and the project is pretty much finished, however on mobile the user can't drag elements without the entire website scrolling. Tapping on elements works fine as a click event, so the website isn't unusable, but I'd like to be able to drag with touch. I know this has been asked many times before, however none of the solutions are working for me and I'm completely lost.

In CSS I've hidden the overflows and made the positions fixed on my container element and the body:

body, html { position: fixed; height: 100%; width: 100%; top: 0; left: 0; right:0; bottom: 0; overflow: hidden}

In Javascript I've prevented the default function of touchmove:

document.addEventListener("touchmove", function(e){e.preventDefault()}, { passive: false });

But, if I change the called function on the event listener to alert("it works"), I'm not being alerted so I don't think it's detecting moving touch events anyway. I do have video overlays, but they are set to "touch-action: none;". What am I doing wrong here and how can I prevent scrolling from interfering with touch functionality?