Vue-cli中实现拖拽-自定义指令

附加条件:不能超出父元素

实现思路: 使用vue自定义指令directives, 监听鼠标按下事件,计算按下时目标元素与父元素的距离,最后通过CSS position-absolute : left / top实现距离改变

(父元素需要有宽高,且有position定位)

1、vue文件中实现

使用directives

template中使用指令

script中定义指令

ini 复制代码
methods: {},
directives: {
  drag: {
    inserted: function(el) {
      // console.log('el:', el)
      let oDiv = el; // 当前元素
      // 禁止选择拖拽块上的文字
      document.onselectstart = function () {
        return false;
      };
      oDiv.onmousedown = function (e) {
        // 获取父元素dom
        let pbox = document.getElementById('video-wrap-hls')
        // console.log('parent-box', pbox.clientWidth, pbox.clientHeight)
        // console.log('child-box', oDiv.clientWidth, oDiv.clientHeight)
        // console.log('e:', e, oDiv.offsetLeft, oDiv.offsetTop)
        // 鼠标按下,计算当前元素距离可视区的距离
        let disX = e.clientX - oDiv.offsetLeft;
        let disY = e.clientY - oDiv.offsetTop;
        document.onmousemove = function (e) {
          // 通过事件委托,计算移动的距离
          let l = e.clientX - disX;
          let t = e.clientY - disY;
          if (l < 0) {
            l = 0
          } else if (l > (pbox.clientWidth - oDiv.clientWidth)) {
            l = pbox.clientWidth - oDiv.clientWidth
          }
          if (t < 0) {
            t = 0
          } else if (t > (pbox.clientHeight - oDiv.clientHeight)) {
            t = pbox.clientHeight - oDiv.clientHeight
          }
          // 移动当前元素
          oDiv.style.left = l + "px";
          oDiv.style.top = t + "px";
        };
        document.onmouseup = function (e) {
          document.onmousemove = null;
          document.onmouseup = null;
        };
        // 防止黏连
        return false;
      };
    },
  }
},

2、main.js全局引入

创建directives.js 在入口文件引入 并Vue.use,实现代码与文件内实现基本相同。

vue官方directive使用方法

from vue官网

from vue官网

项目中使用

在入口文件引入并使用

上述步骤完成后可直接在页面文件中使用

3、小坑

需注意如果css使用了transition过渡, 不能使用all 因为 left / top 改变也会发生过渡 导致发生拖拽延迟效果

如果需要鼠标hover后有动画效果 可以分别写出来

栗子

相关推荐
码上暴富35 分钟前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js
老华带你飞1 小时前
考研论坛平台|考研论坛小程序系统|基于java和微信小程序的考研论坛平台小程序设计与实现(源码+数据库+文档)
java·vue.js·spring boot·考研·小程序·毕设·考研论坛平台小程序
YAY_tyy1 小时前
基于 Vue3 + VueOffice 的多格式文档预览组件实现(支持 PDF/Word/Excel/PPT)
前端·javascript·vue.js·pdf·word·excel
m0_748461394 小时前
Spring Boot + Vue 项目中使用 Redis 分布式锁案例
vue.js·spring boot·redis
珍珠奶茶爱好者5 小时前
vue二次封装ant-design-vue的table,识别columns中的自定义插槽
前端·javascript·vue.js
Slice_cy5 小时前
深入剖析 Vue 响应式系统:从零实现一个精简版
vue.js
羊羊小栈6 小时前
基于「YOLO目标检测 + 多模态AI分析」的PCB缺陷检测分析系统(vue+flask+数据集+模型训练)
vue.js·人工智能·yolo·目标检测·flask·毕业设计·大作业
晚星star6 小时前
在 Web 前端实现流式 TTS 播放
前端·vue.js
本末倒置1836 小时前
前端面试高频题:18个经典技术难点深度解析与解决方案
前端·vue.js·面试
不一样的少年_8 小时前
同事以为要重写,我8行代码让 Vue 2 公共组件跑进 Vue 3
前端·javascript·vue.js