前言

　　很多时候我们写的方法是通用的，这个时候根据使用场景可以选择放在js或者ts文件并让其他文件引入使用，但如果是对现有组件添加新功能的话，还是建议用自定义指令更方便。

设置v-draggin来操作dom元素的拖拽

1. 在main.js 全局添加自定义指令

const app = createApp(App)

app.directive('dragging',{
    mounted(el, binding, vnode) {
        console.log(el, binding, vnode);

        el.addEventListener('mousedown', (e:any) => {
            console.log(e);
            let ol = e.clientX - el.offsetLeft;
            let ot = e.clientY - el.offsetTop;

            // 给document绑定一个onmousemove事件
          document.onmousemove = function (event) {
            event = event || window.event;
            let left = event.clientX - ol;
            let top = event.clientY - ot;
   
            //修改el的位置
            el.style.left = left + "px";
            el.style.top = top + "px";
          };
   
          document.onmouseup = function () {
            document.onmousemove = null;
   
            document.onmouseup = null;
          };
        })
    }
});

2. 在需要使用拖拽功能的dom元素上添加v-dragging

<div id="imgId" width="125" height="125" v-dragging ></div>

<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" v-dragging />