try fix drag btn 1
This commit is contained in:
parent
ef5e2622f8
commit
c92e8497e1
@ -50,6 +50,10 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
const btn = document.getElementById('floatingBtn');
|
const btn = document.getElementById('floatingBtn');
|
||||||
@ -69,7 +73,16 @@
|
|||||||
btn.style.top = '20px';
|
btn.style.top = '20px';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Eventos para mouse
|
||||||
btn.addEventListener('mousedown', startDrag);
|
btn.addEventListener('mousedown', startDrag);
|
||||||
|
document.addEventListener('mousemove', drag);
|
||||||
|
document.addEventListener('mouseup', stopDrag);
|
||||||
|
|
||||||
|
// Eventos para touch
|
||||||
|
btn.addEventListener('touchstart', startDragTouch, { passive: false });
|
||||||
|
document.addEventListener('touchmove', dragTouch, { passive: false });
|
||||||
|
document.addEventListener('touchend', stopDragTouch);
|
||||||
|
|
||||||
link.addEventListener('click', function (e) {
|
link.addEventListener('click', function (e) {
|
||||||
if (hasMoved) {
|
if (hasMoved) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@ -90,9 +103,6 @@
|
|||||||
btn.style.top = `${rect.top}px`;
|
btn.style.top = `${rect.top}px`;
|
||||||
btn.style.right = 'auto';
|
btn.style.right = 'auto';
|
||||||
|
|
||||||
document.addEventListener('mousemove', drag);
|
|
||||||
document.addEventListener('mouseup', stopDrag);
|
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -108,7 +118,7 @@
|
|||||||
hasMoved = true;
|
hasMoved = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
function stopDrag(e) {
|
function stopDrag() {
|
||||||
if (!isDragging) return;
|
if (!isDragging) return;
|
||||||
|
|
||||||
isDragging = false;
|
isDragging = false;
|
||||||
@ -120,9 +130,51 @@
|
|||||||
|
|
||||||
stickToNearestSide(x, y);
|
stickToNearestSide(x, y);
|
||||||
savePosition(x, y);
|
savePosition(x, y);
|
||||||
|
}
|
||||||
|
|
||||||
document.removeEventListener('mousemove', drag);
|
function startDragTouch(e) {
|
||||||
document.removeEventListener('mouseup', stopDrag);
|
if (e.touches.length !== 1) return;
|
||||||
|
|
||||||
|
isDragging = true;
|
||||||
|
hasMoved = false;
|
||||||
|
|
||||||
|
const rect = btn.getBoundingClientRect();
|
||||||
|
offsetX = e.touches[0].clientX - rect.left;
|
||||||
|
offsetY = e.touches[0].clientY - rect.top;
|
||||||
|
|
||||||
|
btn.style.cursor = 'grabbing';
|
||||||
|
btn.style.left = `${rect.left}px`;
|
||||||
|
btn.style.top = `${rect.top}px`;
|
||||||
|
btn.style.right = 'auto';
|
||||||
|
|
||||||
|
e.preventDefault(); // evita scroll
|
||||||
|
}
|
||||||
|
|
||||||
|
function dragTouch(e) {
|
||||||
|
if (!isDragging || e.touches.length !== 1) return;
|
||||||
|
|
||||||
|
const x = e.touches[0].clientX - offsetX;
|
||||||
|
const y = e.touches[0].clientY - offsetY;
|
||||||
|
|
||||||
|
btn.style.left = `${x}px`;
|
||||||
|
btn.style.top = `${y}px`;
|
||||||
|
|
||||||
|
hasMoved = true;
|
||||||
|
e.preventDefault(); // evita scroll
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopDragTouch() {
|
||||||
|
if (!isDragging) return;
|
||||||
|
|
||||||
|
isDragging = false;
|
||||||
|
btn.style.cursor = 'move';
|
||||||
|
|
||||||
|
const rect = btn.getBoundingClientRect();
|
||||||
|
const x = rect.left;
|
||||||
|
const y = rect.top;
|
||||||
|
|
||||||
|
stickToNearestSide(x, y);
|
||||||
|
savePosition(x, y);
|
||||||
}
|
}
|
||||||
|
|
||||||
function stickToNearestSide(x, y) {
|
function stickToNearestSide(x, y) {
|
||||||
@ -163,7 +215,5 @@
|
|||||||
stickToNearestSide(parseInt(x), parseInt(y));
|
stickToNearestSide(parseInt(x), parseInt(y));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user