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 = '';
    })
}