71 lines
3.2 KiB
JavaScript
71 lines
3.2 KiB
JavaScript
function DragWindow(Window) {
|
|
var Touchscreen = false;
|
|
var CalculatedLeft = 0, CalculatedTop = 0, OldLeft = 0, OldTop = 0;
|
|
Window.children[0].addEventListener('mousedown', mouseDown);
|
|
Window.children[0].addEventListener('touchstart', mouseDown);
|
|
|
|
function mouseDown(mouse) {
|
|
Touchscreen = mouse.type === "touchstart";
|
|
mouse.preventDefault();
|
|
if (!Window.classList.contains('DraggingActive')) {
|
|
Window.style.zIndex = "" + 55;
|
|
if (Touchscreen) {
|
|
document.addEventListener('touchmove', mouseMove);
|
|
document.addEventListener('touchend', mouseUp);
|
|
} else {
|
|
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';
|
|
} else {
|
|
Window.style.top = (mouse.changedTouches[0].clientY / innerHeight) * 100 + 'vh';//clamp((mouse.changedTouches[0].clientY / innerHeight) * 100, 0, (((innerHeight - Window.offsetHeight) / innerHeight) * 100) - 5) + 'vh';
|
|
Window.style.left = (mouse.changedTouches[0].clientX / innerWidth) * 100 + 'vw';//clamp((mouse.changedTouches[0].clientX / innerWidth) * 100, 0, (((innerWidth - Window.offsetWidth) / innerWidth) * 100) - 0.5) + 'vw';
|
|
}
|
|
}
|
|
|
|
function mouseUp(mouse) {
|
|
Window.children[1].classList.remove('Dragging');
|
|
Window.classList.remove('DraggingActive');
|
|
if (Touchscreen) {
|
|
document.removeEventListener('touchmove', mouseMove);
|
|
document.removeEventListener('touchend', mouseUp);
|
|
Touchscreen = false;
|
|
} else {
|
|
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;
|
|
} |