自定义v-drag拖拽指令

当前模板添加指令 解决a标签跳转问题

  directives: {
    drag: { // 拖拽指令
      inserted: function (el) {
        el.onmousedown = function (ev) {
          el.setAttribute('data-flag', false)
           // 用元素距离视窗的X、Y坐标，减去el元素最近的相对定位父元素的left、top值
          var sX = ev.clientX - el.offsetLeft
          var sY = ev.clientY - el.offsetTop
          // 不断地更新元素的left、top值
          document.onmousemove = function (ev) {
            el.style.left = ev.clientX - sX + 'px'
            el.style.top = ev.clientY - sY + 'px'
          }
          const firstTime = new Date().getTime();
          document.onmouseup = function (event) {
            document.onmousemove = null
            document.onmouseup = null;
            const lastTime = new Date().getTime();
            if (lastTime - firstTime < 200) {
              el.setAttribute('data-flag', true)
            }
          }
        }
      }
    }
  }

模板代码和样式

    <a
      ref="eleDesgin"
      v-drag
      data-flag="true"
      title="设计模式"
      class="to_desgin"
      @click="gotoPreview"
    ><i class="iconfont icon-shezhi"></i></a>

.to_desgin {
  user-select: none;
  text-decoration: none;
  cursor: pointer;
  position: fixed;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 5px;
  bottom: 20px;
  right: 20px;
  text-align: center;
  z-index: 9999;
  .iconfont {
    font-size: 20px;
    color: #fff;
  }
}

操作方法

gotoPreview() {
    let isDrag = this.$refs.eleDesgin.getAttribute('data-flag')
    if (isDrag === 'true') {
        window.open('/pc/page?')
     }
}

如果对您有帮助，麻烦点个赞再走，谢谢。