vue 拖拽通过子元素拖拽父元素指令

小墨宝2023-12-31 10:41

vue 拖拽通过子元素拖拽父元素指令

需求拖拽头部拖动整个框

复制代码

// candrag.js中的代码如下 directive
// 通过子元素 控制移动父元素，  如果 需要直接控制父元素可以再写一个自定义指令 或者改造下这个指令
export default {
  // 定义 Vue 插件
  install(Vue) {
    Vue.directive('candrag', {
      // 全局指令名为 v-candrag
      inserted(el) {
        el.onmousedown = function(ev) {
          // 获取鼠标按下时的偏移量（鼠标位置 - 元素位置）
          const disX = ev.clientX - el.parentNode.offsetLeft
          const disY = ev.clientY - el.parentNode.offsetTop
          document.onmousemove = function(ev) {
            // 获取鼠标实时移动时，元素的位置（鼠标实时位置 - 偏移量）
            const l = ev.clientX - disX
            const t = ev.clientY - disY
            // 实时设置元素位置
            el.parentNode.style.left = l + 'px'
            el.parentNode.style.top = t + 'px'
          }
          document.onmouseup = function() {
            // 鼠标抬起时，销毁移动事件和鼠标抬起事件
            document.onmousemove = null
            document.onmouseup = null
          }
        }
      }
    })
  }
}

使用

复制代码

main.js
import candrag from '@/directive/candrag'
Vue.use(candrag)

使用的地方
<div>
	<div v-candrag></div>
	<div></div>
</div>