结合vue自定义指令实现元素拖拽

vue自定义指令：https://v2.cn.vuejs.org/v2/guide/custom-directive.html

 1、在main.js注册全局自定义指令

Vue.directive('drag', {
    // 当被绑定的元素插入到 DOM 中时……
    inserted: function (el) {
        el.onmousedown = function (e) {
      　　　var disx = e.pageX - el.offsetLeft //获取鼠标相对元素距离
      　　　var disy = e.pageY - el.offsetTop
 
      　　　document.onmousemove = function (e) {
        　　　　//鼠标移动触发事件，元素移到对应为位置
        　　　　el.style.left = e.pageX - disx + 'px'
        　　　　el.style.top = e.pageY - disy + 'px'
      　　　}
      　　　document.onmouseup = function () {
        　　　　//鼠标抬起，清除绑定的事件，元素放置在对应的位置
        　　　　document.onmousemove = null
        　　　　document.onmousedown = null
      　　　}
        　　e.preventDefault() //阻止浏览器的默认事件
    　　}
    }
})

 2、使用