自定義指令-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;
                        }
                    }
                    
                },

            }
        }