vue 自定义指令拖拽

/*
 * @Author: mabo 9086467+mabo19920219@user.noreply.gitee.com
 * @Date: 2022-12-21 16:56:40
 * @LastEditors: mabo 9086467+mabo19920219@user.noreply.gitee.com
 * @LastEditTime: 2023-01-30 13:39:44
 * @FilePath: \a-zhihuiqix\src\libs\directives\directive.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import Vue from "vue";
const Drag1=Vue.directive(
    'drag1',{
      inserted: function(el) {
        el.style.position = "absolute";
        el.onmousedown = e => {
          var ex = e.clientX - el.offsetLeft;
          var ey = e.clientY - el.offsetTop;
          el.onmousemove = e => {
              var ex1=e.clientX-ex
              var ey1=e.clientY-ey
              el.style.left=ex1+'px'
              el.style.top=ey1+'px'
          };
          el.onmouseup=e=>{
              el.onmousemove=null
          }
        };
      }
    }
)
const Drag2=Vue.directive(
    'drag2',{
      inserted: function(el) {
        el.style.position = "absolute";
        el.onmousedown = e => {
          var ex = e.clientX - el.offsetLeft;
          var ey = e.clientY - el.offsetTop;
          el.onmousemove = e => {
              var ex1=e.clientX-ex
              var ey1=e.clientY-ey
              el.style.left=ex1+'px'
              el.style.top=ey1+'px'
          };
          el.onmouseup=e=>{
              el.onmousemove=null
          }
        };
      }
    }
)
export default{
  Drag1,
  Drag2
}

使用

main.js引入
import "./libs/flexible.js"

使用

v-drag1