vue自定义指令中的移动端和pc端div的拖拽行为

vue自定义指令是个非常有意思的存在，是一个非常便利的功能。
今天突然想做一下拖拽div的功能，本来想直接写到.vue文件中然后想到其实拖拽是针对某个div，于是就想到自定义指令。

vue
template中

<div style="width: 100px;height: 100px;background: black;position: fixed;top: 200px;left: 0" v-dragMove v-drag></div>

<script>
    import drag from '../assets/drag'
    import dragMove from '../assets/dragMove'
</script>

drag

新建drag.js文件这是pc端的拖拽方案

import Vue from 'vue'

Vue.directive('drag',{
    bind:function (el) {
        //监听document是因为如果监听元素el的话鼠标太快移出元素后就会失效
        el.onmousedown = (event) => {
            //算出鼠标相对元素的位置
            let pointX = event.clientX - el.offsetLeft;//鼠标位置X减去元素距离左边距离（鼠标到元素左边的距离）
            let pointY = event.clientY - el.offsetTop;//鼠标位置Y减去距离顶部距离（鼠标到元素顶部的高度）

            document.onmousemove = (e)=>{
                //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                let left = e.clientX - pointX;
                let top = e.clientY - pointY;

                //移动当前元素
                el.style.left = left + 'px';
                el.style.top = top + 'px';
            };
            document.onmouseup = (e) => {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        };
    }
})

dragMove

新建dragMove.js文件这是移动端的拖拽方案

import Vue from 'vue'
Vue.directive('dragMove',{
    bind: function (el, binding) {
        var touch,disX,disY
        el.ontouchstart = (e) => {
            if(e.touches){//有可能对象在e上也有可能对象在e.touches[0]上
                touch = e.touches[0];
            }else {
                touch = e;
            }
            disX = touch.clientX - el.offsetLeft;//鼠标位置X减去元素距离左边距离（鼠标到元素左边的距离）
            disY = touch.clientY - el.offsetTop;//鼠标位置Y减去距离顶部距离（鼠标到元素顶部的高度）
        }
        el.ontouchmove = (e)=>{
            if(e.touches){//有可能对象在e上也有可能对象在e.touches[0]上
                touch = e.touches[0];
            }else {
                touch = e;
            }
            //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
            let left = touch.clientX - disX;
            let top = touch.clientY - disY;

            //移动当前元素
            el.style.left = left + 'px';
            el.style.top = top + 'px';
            e.preventDefault();//阻止页面的滑动默认事件
        };
        el.ontouchend = (e) => {
            // el.ontouchmove = null;
            // el.ontouchend = null;
        };
    }
})