-
Notifications
You must be signed in to change notification settings - Fork 0
/
dragToMove.js
35 lines (31 loc) · 1.33 KB
/
dragToMove.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
export function dragToMove(div, handle) {
const isTouch = window.ontouchstart !== undefined;
let mousedown = false;
let offsetX;
let offsetY;
let startX;
let startY;
handle.addEventListener(isTouch ? "touchstart" : "mousedown", (e) => {
e.stopPropagation()
mousedown = true;
offsetX = e.touches ? e.touches[0].clientX - e.target.getBoundingClientRect().left: e.offsetX;
offsetY = e.touches ? e.touches[0].clientY - e.target.getBoundingClientRect().top : e.offsetY;
});
document.addEventListener(isTouch ? "touchmove" : "mousemove", (e) => {
if (mousedown) {
e.preventDefault();
e = e.touches ? e.touches[0] : e;
startX = e.clientX-offsetX;
startY = e.clientY-offsetY;
div.style.left = startX+"px";
div.style.top = startY+"px";
};
}, {passive: false});
window.addEventListener(isTouch ? "touchend" : "mouseup", () => {
mousedown = false;
if (startX < 0) div.style.left = 0+"px";
if (startX > window.screen.width-div.clientWidth) div.style.left = window.screen.width-div.clientWidth+"px";
if (startY < 0) div.style.top = 0+"px";
if (startY > window.innerHeight-div.clientHeight) div.style.top = window.innerHeight-div.clientHeight+"px";
});
};