44 lines
1.3 KiB
JavaScript
44 lines
1.3 KiB
JavaScript
export function makeItFloat(target){
|
|
let startTarget = target.querySelector('.title');
|
|
|
|
console.log('selected target :', startTarget);
|
|
|
|
let startX, startY;
|
|
let clicked = false;
|
|
let selectedPointer;
|
|
|
|
startTarget.addEventListener('pointerdown', (event) => {
|
|
selectedPointer = event.pointerId;
|
|
startX = event.pageX;
|
|
startY = event.pageY;
|
|
console.log('clicking...')
|
|
})
|
|
|
|
document.addEventListener('pointermove', (event) => {
|
|
if(event.pointerId === selectedPointer){
|
|
event.preventDefault();
|
|
document.querySelector('html').style.overflow = 'hidden';
|
|
console.log('moving...')
|
|
let currentX = event.pageX;
|
|
let currentY = event.pageY;
|
|
let moveX = target.offsetLeft + currentX - startX;
|
|
target.style.left = moveX + 'px';
|
|
let moveY = target.offsetTop + currentY - startY;
|
|
target.style.top = moveY + 'px';
|
|
startX = currentX;
|
|
startY = currentY;
|
|
}
|
|
});
|
|
|
|
document.addEventListener('pointerup', () => {
|
|
console.log('STOP !')
|
|
selectedPointer = null;
|
|
document.querySelector('html').style.overflow = '';
|
|
})
|
|
|
|
document.addEventListener('pointercancel', () => {
|
|
console.log('STOP !')
|
|
selectedPointer = null;
|
|
document.querySelector('html').style.overflow = '';
|
|
})
|
|
} |