vue拖拽组件自定义指令，解决拖拽和点击事件冲突问题，解决拖拽组件在iframe上面延迟卡顿问题

weixin_51565477

已于 2023-05-09 14:13:33 修改

阅读量1.6k

点赞数

文章标签： vue.js javascript 前端

于 2023-05-06 15:59:06 首次发布

本文链接：https://blog.csdn.net/weixin_51565477/article/details/130529266

版权

文章介绍了如何在Vue中创建一个自定义指令`v-drag`来实现拖拽功能，同时处理了拖拽元素在iframe上的卡顿问题，通过设置`pointerEvents`属性。当鼠标抬起时，会检测是否触发了点击事件，并调用`showScreenInteraction`方法。

摘要由CSDN通过智能技术生成

在这里插入图片描述

1.自定义指令

directives: {
     drag(el,data,vnode) {
      const oDiv = el
      oDiv.onmousedown = e => {
      	// 获取ifream，解决拖拽组件在ifream上面卡顿-根据ifream pointerEvents 
      	let iframDiv = document.getElementById("screenProjection")
        if(iframDiv) {
            console.log('按下')
            iframDiv.style.pointerEvents = "none"
        }
        const disY = e.pageY - oDiv.offsetTop
        document.onmousemove = e => {
        //解决onmouseup事件有时候不触发
        if ( el.stopPropagation ) {
            el.stopPropagation()
        }
        if ( el.preventDefault ) {
            el.preventDefault()
        }
          let curT = e.pageY - disY
          const scrModelEle = document.getElementsByClassName('screen-model')[0]
          let minT = 0,maxT = scrModelEle.clientHeight - el.offsetHeight
          //超出盒子问题
          curT = curT<minT?minT:(curT > maxT ? maxT : curT)
          oDiv.style.top = curT + 'px'
        }
        document.onmouseup = e2 => {
          if(iframDiv) {
            iframDiv.style.pointerEvents = "auto"
          }
          document.onmousemove = null
          document.onmouseup = null
          if ( e.clientX == e2.clientX && e.clientY == e2.clientY ) {
          		//点击拖拽冲突
			  vnode.context.showScreenInteraction()
		  }
        }
        return false
      }
    }