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