Tags: Mobile edit Mobile web edit Advanced mobile edit |
Tags: Mobile edit Mobile web edit Advanced mobile edit |
| Line 18: |
Line 18: |
| boxShadow: "0 0 10px black", | | boxShadow: "0 0 10px black", |
| width: "180px", | | width: "180px", |
| cursor: "move", // show dragging cursor
| | userSelect: "none" |
| userSelect: "none" // avoid selecting text while dragging | |
| }); | | }); |
|
| |
|
| Line 168: |
Line 167: |
| document.body.appendChild(minimizedIcon); | | document.body.appendChild(minimizedIcon); |
| document.body.appendChild(ytContainer); | | document.body.appendChild(ytContainer); |
|
| |
| // === Dragging logic ===
| |
| let posX = 0, posY = 0, startX = 0, startY = 0;
| |
| let dragging = false;
| |
|
| |
| function onDragStart(e) {
| |
| dragging = true;
| |
| startX = e.type === "touchstart" ? e.touches[0].clientX : e.clientX;
| |
| startY = e.type === "touchstart" ? e.touches[0].clientY : e.clientY;
| |
| posX = parseInt(menu.style.right);
| |
| posY = parseInt(menu.style.top);
| |
| e.preventDefault();
| |
| }
| |
|
| |
| function onDragMove(e) {
| |
| if (!dragging) return;
| |
| const clientX = e.type === "touchmove" ? e.touches[0].clientX : e.clientX;
| |
| const clientY = e.type === "touchmove" ? e.touches[0].clientY : e.clientY;
| |
| const dx = startX - clientX;
| |
| const dy = clientY - startY;
| |
|
| |
| let newRight = posX + dx;
| |
| let newTop = posY + dy;
| |
|
| |
| // keep inside viewport horizontally
| |
| newRight = Math.max(0, Math.min(window.innerWidth - menu.offsetWidth, window.innerWidth - newRight - menu.offsetWidth));
| |
| // keep inside viewport vertically
| |
| newTop = Math.max(0, Math.min(window.innerHeight - menu.offsetHeight, newTop));
| |
|
| |
| menu.style.right = newRight + "px";
| |
| menu.style.top = newTop + "px";
| |
|
| |
| e.preventDefault();
| |
| }
| |
|
| |
| function onDragEnd() {
| |
| dragging = false;
| |
| }
| |
|
| |
| // Attach events to header for dragging
| |
| header.style.touchAction = "none"; // prevent default gestures on mobile
| |
| header.addEventListener("mousedown", onDragStart);
| |
| header.addEventListener("touchstart", onDragStart);
| |
| window.addEventListener("mousemove", onDragMove);
| |
| window.addEventListener("touchmove", onDragMove);
| |
| window.addEventListener("mouseup", onDragEnd);
| |
| window.addEventListener("touchend", onDragEnd);
| |
| })(); | | })(); |