function DragWindow(Window) { var Touchscreen = false; var CalculatedLeft = 0, CalculatedTop = 0, OldLeft = 0, OldTop = 0; Window.children[0].addEventListener('mousedown', mouseDown); function mouseDown(mouse) { mouse.preventDefault(); if (!Window.classList.contains('DraggingActive')) { Window.style.zIndex = "" + 55; document.addEventListener('mousemove', mouseMove); document.addEventListener('mouseup', mouseUp); Window.classList.add('DraggingActive'); Window.children[1].classList.add("Dragging"); OldLeft = mouse.clientX; OldTop = mouse.clientY; Window.children[1].style.transition = '0.5s'; setTimeout(function () { Window.children[1].style.transition = '0.0s'; }, 500); } } function mouseMove(mouse) { mouse.preventDefault(); if (!Touchscreen) { CalculatedLeft = OldLeft - mouse.clientX; CalculatedTop = OldTop - mouse.clientY; OldLeft = mouse.clientX; OldTop = mouse.clientY; Window.style.top = ((Window.offsetTop - CalculatedTop) / innerHeight) * 100 + 'vh';//clamp(((Window.offsetTop - CalculatedTop) / innerHeight) * 100, 0, (((innerHeight - Window.offsetHeight) / innerHeight) * 100) - 5) + 'vh'; Window.style.left = ((Window.offsetLeft - CalculatedLeft) / innerWidth) * 100 + 'vw'; //clamp(((Window.offsetLeft - CalculatedLeft) / innerWidth) * 100, 0, (((innerWidth - Window.offsetWidth) / innerWidth) * 100) - 0.5) + 'vw'; } } function mouseUp(mouse) { Window.children[1].classList.remove('Dragging'); Window.classList.remove('DraggingActive'); document.removeEventListener('mousemove', mouseMove); document.removeEventListener('mouseup', mouseUp); Window.children[1].style.transition = '0.5s'; Window.style.zIndex = "" + 50; setTimeout(function () { Window.children[1].style.transition = '0.0s'; }, 500); } } function clamp(number, lower, upper) { if (number > upper) { return upper; } if (number < lower) { return lower; } return number; }