自定义指令-v-drag拖拽

如果想注册局部指令，组件中也接受一个 directives 的选项:

directives: {
  drag: {
    // 指令的定义
    bind: function (el, binding, vnode) {
      // el 代表绑定的dom对象，可以修改
      // binding 是一个对象，不可修改
      // vnode代表的是这个vue实例，不可修改
    }
  }
}

然后你可以在模板中任何元素上使用新的 v-focus 属性

<div v-drag></div>

一个指令定义对象可以提供多个钩子函数，本次只需要bind即可：
例子代码：

<div v-drag></div>


directives:{
            drag:{
                bind: function (el, binding, vnode) {
                    el.onmousedown = function(e){
                        var disx = e.clientX - el.offsetLeft;
                        var disy = e.clientY - el.offsetTop;

                        document.onmousemove = function (e){
                            let left = e.clientX - disx;
                            let top = e.clientY - disy;

                            el.style.left = left+'px';
                            el.style.top = top+'px';


                        }
                        document.onmouseup = function(){                      
                            document.onmousemove = document.onmouseup = null;
                        }
                    }
                    
                },

            }
        }