css變量完成拖動元素效果

css變量可以有js進行設置，在move事件中，實時修改css變量，就可以實現元素的拖動效果。同時變量可以被復用，其他的元素可以使用此變量來得出別的效果。

下面是css變量拖動效果的demo:

.box{
     width: 100px;
     height: 100px;
     background-color: aquamarine;
     transform: translate(var(--mouse-x),var(--mouse-y));
}

<div class="box"></div>

document.addEventListener('mousedown', e => {   
    //按下計算offset
    let rect = e.target.getBoundingClientRect();
    let offset = {
        left: e.clientX - rect.left,
        top: e.clientY - rect.top
    }
    //定義move函數
    let moveFunc = function(e){
        const docStyle = document.documentElement.style;
        docStyle.setProperty('--mouse-x', e.clientX - offset.left + 'px');
        docStyle.setProperty('--mouse-y', e.clientY - offset.top + 'px');
    }
    
    //添加move事件
    document.addEventListener('mousemove', moveFunc);

    //彈起解綁move事件
    document.addEventListener('mouseup', e => {
        document.removeEventListener('mousemove',moveFunc);
    })
})