【vue】自定义拖拽以及阻止默认点击事件和拖拽冲突

Rookie_a

已于 2022-07-29 17:23:29 修改

阅读量2.2k

点赞数 1

分类专栏：前端 JS Vue基础文章标签： vue.js javascript 前端

于 2022-07-29 17:21:12 首次发布

本文链接：https://blog.csdn.net/Rookie_a/article/details/126060171

版权

前端同时被 3 个专栏收录

14 篇文章 1 订阅

订阅专栏

Vue基础

6 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

随手记录

import Vue from 'vue'
// 拖拽指令
const drag = Vue.directive('drag', {
  inserted: function (el, data) {
    let firstTime = null
    let lastTime = null
    el.onmousedown = function (e) {
      if (e.target.id === data.value || !data.value) {
        firstTime = new Date().getTime()
        el.style.position = 'absolute'
        var disx = e.pageX - el.offsetLeft
        var disy = e.pageY - el.offsetTop
        document.onmousemove = function (e) {
          let positionLeft = e.pageX - disx
          let positionTop = e.pageY - disy
          const winWidth = window.innerWidth
          const winHeight = window.innerHeight
          if (positionLeft <= 0) positionLeft = 0
          if (positionTop <= 0) positionTop = 0
            if (positionLeft > winWidth - el.offsetWidth) positionLeft = winWidth - el.offsetWidth
            if (positionTop > winHeight - el.offsetHeight) positionTop = winHeight - el.offsetHeight
          el.style.left = positionLeft + 'px'
          el.style.top = positionTop + 'px'
        }
        // 获取鼠标抬起的时间 ， 点击事件和拖拽事件存在时间差
        document.onmouseup = function (e) {
          lastTime = new Date().getTime()
          document.onmousemove = document.onmouseup = null
          // 用时间差判断是拖拽还是点击
          if ((lastTime - firstTime) > 200) {
            document.getElementById('dragbtn').setAttribute('data-flag', true)
          } else {
            document.getElementById('dragbtn').setAttribute('data-flag', false)
          }
        }
      }
    }
  }
})

main.js

export default drag 

// 导出在main.js引用
import drag from '@/utils/drag

vue页面

//  使用
<div v-drag id="dragbtn"></div>
// 获取自定义的属性
const isClick = document.getElementById('dragbtn').getAttribute('data-flag')
      if (isClick !== 'true') {
        // 点击事件业务处理
      } else {
        
      }