自定义拖拽div,不超出父级（使用自定义指令）

• 在main.ts 文件中添加自定义指令

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import piniaStore from "@/store";
import "@/assets/styles/index.scss"
import {useAccountInfoStore} from "@/store/accountInfoStore";
InitCustomConfig().then(config => {
  const app = createApp(App)
      .use(piniaStore)
      .use(router)
      .use(i18n)
  document.title = config.logoConfig?.systemTitle ?? ""
  // 自定义指令--拖拽
  app.directive('drag',(el) => {
    let oDiv = el // 当前元素
    // let self = this // 上下文
    // 禁止选择网页上的文字
    document.onselectstart = function () {
      return false
    }
    oDiv.onmousedown = function (e:any) {
      oDiv.style.cursor = 'move'
      let parentWidth = oDiv.parentElement.offsetWidth
      let parentHeight = oDiv.parentElement.offsetHeight
      let oDivWidth = oDiv.offsetWidth
      let oDivHeight = oDiv.offsetHeight
      // 鼠标按下，计算当前元素距离可视区的距离
      let disX = e.clientX - oDiv.offsetLeft
      let disY = e.clientY - oDiv.offsetTop
      document.onmousemove = function (e) {
        let left:number = e.clientX - disX
        let top:number = e.clientY - disY
        // 通过事件委托，计算移动的距离
        if(left < 0) {
          left = 0
        }
        if(top < 0) {
          top = 0
        }
        if(left + oDivWidth > parentWidth) {
          left = parentWidth - oDivWidth
        }
        if(top + oDivHeight > parentHeight) {
          top = parentHeight - oDivHeight
        }
        let right = parentWidth - left - oDivWidth
        let bottom = parentHeight - top - oDivHeight
        //移动当前元素
        oDiv.style.right = right + "px";
        // oDiv.style.bottom = bottom + "px";
        oDiv.style.top = top + "px";
      }
      document.onmouseup = function (e) {
        oDiv.style.cursor = 'default'
        document.onmousemove = null
        document.onmouseup = null
      }
      // return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
      return false
    }
    }
  );
  // 自定义指令--按钮权限
  app.directive('permission',
    (el, binding) => {
      if (useAccountInfoStore().account.authority) {
        if (useAccountInfoStore().account.authority?.indexOf(binding.value) === -1 && useAccountInfoStore().account.authority?.indexOf("admin") === -1) {
          el.parentNode && el.parentNode.removeChild(el)
        }
      }
    }
  );

}).catch(err => {
  console.log(err);
})

• 在组件中使用

<template>
<div class="parents-box" v-drag >
  <div class="sub-box">
    可拖拽盒子
  </div>
  
</div>
</template>
<script lang='ts' setup>
import { ref, reactive,watch } from 'vue'
import { $ref } from 'vue/macros';

</script>
<style scoped lang='scss'>
.parents-box {
  width: 100%;
  height: 100%;
  position: relative;
  .sub-box{
     position: absolute;
     right: 10px;                   
     top: 10px;
     width: 300px;
     height: 200px;
     user-select: none;
     z-index: 2; 
  }
}
</style>

• 注意：
  1.在定义自定义拖拽指令时设置 oDiv.style.right/oDiv.style.left oDiv.style.top/oDiv.style.bottom 的方向 在div元素上使用的时候css中的 right/left top/bottom 也需要保持一致 （要使用position: absolute;）
  2.使用的div元素 css中 z-index需要设置的大一些 避免权重不够 拖拽时导致没有效果