vue拖拽效果

在实现前有必须说一下鼠标事件的几个重要属性

clientX 鼠标相对于浏览器左上角x轴的坐标； 不随滚动条滚动而改变；
clientY 鼠标相对于浏览器左上角y轴的坐标； 不随滚动条滚动而改变；
pageX   鼠标相对于浏览器左上角x轴的坐标； 随滚动条滚动而改变；
pageY   鼠标相对于浏览器左上角y轴的坐标； 随滚动条滚动而改变；
screenX 鼠标相对于显示器屏幕左上角x轴的坐标；
screenY 鼠标相对于显示器屏幕左上角y轴的坐标；
offsetX 鼠标相对于事件源左上角X轴的坐标；
offsetY 鼠标相对于事件源左上角Y轴的坐标；

这里有两种方式实现，一个是基本的vue组件，另外一个是vue的指令的方式实现，其实原理都是一样。

一、 vue组件

<template>
    <div class="move-body">
        <div class="container"
            @mousedown="mousedown"
            @mouseup="mouseup"
            >
                移动box
        </div>
    </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
    data(){
        return {
            startX:0,   // 开始水平坐标
            startY:0,   // 开始垂直坐标
        }
    },
    methods:{
        mousedown(e){
            this.elementX = e.target.offsetLeft
            this.elementY = e.target.offsetTop
            this.startX = e.clientX
            this.startY = e.clientY
            window.addEventListener('mousemove',this.mousemove)
        },
        mousemove(e){
            let relativeX = e.clientX - this.startX
            let relativeY = e.clientY - this.startY
            e.target.style.left = relativeX + this.elementX + "px"
            e.target.style.top = relativeY + this.elementY + "px"
        },
        mouseup(e){
            window.removeEventListener('mousemove',this.mousemove)
        }
    }
})
</script>
<style scoped lang="scss">
    .move-body{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        .container{
            position: absolute;
            cursor:move;
            width: 200px;
            height: 200px;
            left: 10px;
            top: 10px;
            box-shadow: 0 0 10px 1px rgba(0,0,0,.3);
        }
    }
</style>

二、 vue指令

<template>
    <div class="move-body">
        <div class="container"
            v-drag >
                移动box(指令)
        </div>
    </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
    directives:{
        drag:{
            bind:(el)=>{
                let startX = 0
                let startY = 0
                let elementX = 0
                let elementY = 0
                el.onmousedown = (e)=>{
                    elementX = e.target.offsetLeft
                    elementY = e.target.offsetTop
                    startX = e.clientX
                    startY = e.clientY
                    window.addEventListener('mousemove',mousemove)
                }
                let mousemove =(e)=>{
                    let relativeX = e.clientX - startX
                    let relativeY = e.clientY - startY
                    e.target.style.left = relativeX + elementX + "px"
                    e.target.style.top = relativeY + elementY + "px"
                }
                el.onmouseup = (e)=>{
                    window.removeEventListener('mousemove',mousemove)
                }
            }
        }
    },
})
</script>
<style scoped lang="scss">
    .move-body{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        .container{
            position: absolute;
            cursor:move;
            width: 200px;
            height: 200px;
            left: 10px;
            top: 10px;
            box-shadow: 0 0 10px 1px rgba(0,0,0,.3);
        }
    }
</style>