实例: 全局拖拽指令

//component/Loading/index.ts
import { createVNode, render, Directive, DirectiveBinding } from "vue";
import type { App, VNode } from "vue";

//声明类型
type Dir = {}; //用的不多可以不用传value的泛型
//判断边界
const range = (loc: number, min: number, max: number) => {};

export default {
  install(app: App) {
    //app实例
    // 自定义全局指令，可以在main.js 的app上注册就可以全局使用
    app.directive("move", (el: HTMLElement, binding: DirectiveBinding<Dir>) => {
      //按下方法
      const mouseDown = (e: MouseEvent) => {};
      //鼠标按下
      el.addEventListener("mousedown", mouseDown);
    });
  },
};

实例: 局部拖拽指令

<script setup lang='ts'>
import { Directive, DirectiveBinding } from 'vue'

type Dir = {
  
}//用的不多可以不用传value的泛型

//判断边界
const range = (loc: number, min: number, max: number) => {
  if (loc > max) {
    return max;
  } else if (loc < min) {
    return min;
  } else {
    return loc;
  }
}
//移动的自定义指令
const vMove: Directive = (el: HTMLElement, dir: DirectiveBinding<Dir>) => {
  const mouseDown = (e: MouseEvent) => {
    let X = e.clientX - el.offsetLeft
    let Y = e.clientY - el.offsetTop

    const move = (e: MouseEvent) => {
      let l = e.clientX - X
      let h = e.clientY - Y
      let windowWidth = document.documentElement.clientWidth
      let windowHeight = document.documentElement.clientHeight
      l = range(l, 0, windowWidth - el.offsetWidth)
      h = range(h, 0, windowHeight - el.offsetHeight)
      el.style.left = `${l}px`
      el.style.top = `${h}px`
    }
    //移动时
    document.addEventListener('mousemove', move)
    //鼠标松开时，移除 'mousemove' 的 move方法
    document.addEventListener('mouseup', () => document.removeEventListener('mousemove', move))
  }
  //鼠标按下
  el.addEventListener('mousedown', mouseDown)
}
</script>

<template><div v-move class="boxx"></div></template>

<style lang='less' scoped>
.boxx {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: red;
}
</style>