vue 拖拽

<script>
export default {
    methods: {
        // 实现移动端拖拽
        down(){
            var moveDiv = document.getElementById('lucky')
            this.flags = true;
            var touch;
            if(event.touches){
                touch = event.touches[0];
            }else {
                touch = event;
            }
            this.position.x = touch.clientX;
            this.position.y = touch.clientY;
            this.dx = moveDiv.offsetLeft;
            this.dy = moveDiv.offsetTop;
        },
        move(){
            var moveDiv = document.getElementById('lucky')
            if(this.flags){
            var touch ;
            if(event.touches){
                touch = event.touches[0];
            }else {
                touch = event;
            }
            this.nx = touch.clientX - this.position.x;
            this.ny = touch.clientY - this.position.y;
            this.xPum = this.dx+this.nx;
            this.yPum = this.dy+this.ny;
            moveDiv.style.left = this.xPum+"px";
            moveDiv.style.top = this.yPum +"px";
            //阻止页面的滑动默认事件；如果碰到滑动问题，1.2 请注意是否获取到 touchmove
                event.preventDefault();
            }
        },
        //鼠标释放时候的函数
        end(){
            this.flags = false;
            // 鼠标释放的时候从这里判断块是否被拖到窗口外变成负值，从而进行恢复
        },
        click() {
            console.log('click')
        }
    }
}
</script>

<style lang="scss" scoped>
.error {
    #lucky {
        width: 150px;
        height: 150px;
        background: red;
        position: fixed;
        top: 6rem;
        right: 0;
        z-index: 200;
    }
}
</style>