vue中实现拖拽功能

自定义的全局指令

提示：拖拽指令

---

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、拖拽

1.自定义拖拽指令

代码如下（示例）：仅供参考

	data(){
		return {
			params:''
		}
	},
  	directives: { // 自定义拖拽指令，先声明这个指令
     drag(el) { // 可就在里写指令的js代码
      const oDiv = el // 当前元素
      document.onselectstart = () => {
        return false
      }
      oDiv.onmousedown = e => { // 鼠标按下时的鼠标所在的X，Y坐标
        // 鼠标按下，计算当前元素距离可视区的距离
        const disX = e.clientX - oDiv.offsetLeft
        const disY = e.clientY - oDiv.offsetTop
        document.onmousemove = e => {
          // 通过事件委托，计算移动的距离 
          // 因为浏览器里并不能直接取到并且使用clientX、clientY,所以使用事件委托在内部做完赋值
          const l = e.clientX - disX
          const t = e.clientY - disY
          // 计算移动当前元素的位置，并且给该元素样式中的left和top值赋值
          oDiv.style.left = l + 'px'
          oDiv.style.top = t + 'px'
        }
        document.onmouseup = e => {  // 鼠标抬起，清空之前所在的位置，新拖拽的位置已生成并赋值
          document.onmousemove = null
          document.onmouseup = null
        }
        // return false不加的话可能导致黏连，拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
        return false
      }
    }
  },

2.页面挂载

代码如下（示例）：案列仅供参考

<el-popover
      id="customer"
      v-model="isShow"
      v-drag   // 直接挂在指令即可
      placement="left"
      trigger="manual"
    >

3.css样式

#kefu {
  //若用relative定位，该定位不脱离文档流，达不到初始化的样式效果
  //若用absolute定位，该定位相对于页面定位，虽然能实现拖动效果，但页面存在滚条时，会随着
  //滚动而改变top值；若没有滚动条，拖到边缘时超出部分也将出现滚动条显示。
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 999;
  width: 60px;
  height: 60px;
}

注：一定要用fixed定位，而不是使用relative、absolute定位。

参考文档：https://www.jianshu.com/p/9816e8b9040e