基于Vue 撸一个指令实现拖拽功能


Posted in Javascript onOctober 09, 2019

之前撸了一个copy 指令,这次再撸一个拖拽指令。。

具体是个什么蛇皮玩意儿呢,大概就像介样:

基于Vue 撸一个指令实现拖拽功能 

emmm。。没错,看起来就是如此的鸡肋,但是莫得办法,大佬喜欢啊。

由于我们项目中用的是 element-ui ,所有这个指令只针对 element-ui 的对话框组件哈,如果你们用的别的 ui 库也有这个需求的,涂涂改改应该也能用。。

其实这个拖拽的原理还是很简单的:

1.首先鼠标按下( onmousedown )

  • 记录目标元素当前的 left 和 top 值

2.鼠标移动( onmousemove )

  • 计算每次移动的横向距离 ( disX ) 和纵向距离 ( disY )
  • 并改变元素的 left ( left = left + disX )和 top ( top = top + disY )值

3.鼠标松开( onmouseup )

完成一次拖拽,做一些收尾工作

  • left 和 top 值容易获取,关键是 disX 和 disY 怎么计算呢?

容我先普及一哈:

  • clientX :表示鼠标当前的 X 坐标
  • clientY :表示鼠标当前的 Y 坐标

那么伪代码就是:

  • disX = 鼠标按下时的 clientX - 鼠标松开时的 clientX
  • disY = 鼠标按下时的 clientY - 鼠标松开时的 clientY

就这么简单,好了,下面就开始撸代码了。

// 这个助手方法下面会用到,用来获取 css 相关属性值
const getAttr = (obj, key) => (
  obj.currentStyle
  ? obj.currentStyle[key]
  : window.getComputedStyle(obj, false)[key]
);
const vDrag = {
  inserted(el) {
   /**
    * 这里是跟据 dialog 组件的 dom 结构来写的
    * target: dialog 组件的容器元素
    * header:dialog 组件的头部区域,也是就是拖拽的区域
    */
    const target = el.children[0];
    const header = target.children[0];
    // 鼠标手型
    header.style.cursor = 'move';
    header.onmousedown = (e) => {
      // 记录按下时鼠标的坐标和目标元素的 left、top 值
      const currentX = e.clientX;
      const currentY = e.clientY
      const left = parseInt(getAttr(target, 'left'));
      const top = parseInt(getAttr(target, 'top'));
      document.onmousemove = (event) => {
        // 鼠标移动时计算每次移动的距离,并改变拖拽元素的定位
        const disX = event.clientX - currentX;
        const disY = event.clientY - currentY;
        target.style.left = `${left + disX}px`;
        target.style.top = `${top + disY}px`;
        // 阻止事件的默认行为,可以解决选中文本的时候拖不动
        return false;
      }
      // 鼠标松开时,拖拽结束
      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    }
  },
  // 每次重新打开 dialog 时,要将其还原
  update(el) {
    const target = el.children[0];
    target.style.left = '';
    target.style.top = '';
  },
  // 最后卸载时,清除事件绑定
  unbind(el) {
    const header = el.children[0].children[0];
    header.onmousedown = null;
  },
};
export default vDrap;

这样就实现了 最简单 的拖拽了,这样就 ok 了吗? 当然不是,这样会有什么问题呢?就是如果用力过猛把整个弹框都拖到可视区域之外了,那就抠不出来了。

所以还得完善一下,判断四个方向的边界,如果超过边界值就不动了。边界值实际上就是在屏幕上能拖动的最大距离也就是 disX 和 disY 的最大值

  • 上边界: target.offsetTop
  • offsetTop :这里可以表示目标元素( target )上边框距离页面顶部的距离
  • 下边界: body.height - target.offsetTop - header.height
  • header.height :预留高度,表示往下可以拖到只留下可拖拽区域在外面
  • 左边界: target.offsetLeft + target.width - 50
  • offsetLeft :这里可以表示目标元素左边框距离页面左边的距离
  • 50 :表示预留的宽度,可以自己随便定只要大于 0 即可,表示往左再怎么拖也会留下 50px 的宽度在外面
  • 右边界: body.width - target.offsetLeft - 50

这里 50 同上,表示往左再怎么拖也会留下 50px 的宽度在外面

这里计算边界值的方法有多种,大家可以去尝试自己的想法。然后我粗略的画了一个图,帮助理解,虽然感觉只有我自己看得懂。哈哈。。。

基于Vue 撸一个指令实现拖拽功能 

下面用代码实现边界判断就 ok了

// ...
// 以上代码省略
header.onmousedown = (e) => {
  // ...
  // 以上代码省略
  // 分别计算四个方向的边界值
  const minLeft = target.offsetLeft + parseInt(getAttr(target, 'width')) - 50;
  const maxLeft = parseInt(getAttr(document.body, 'width')) - target.offsetLeft - 50;
  const minTop = target.offsetTop;
  const maxTop = parseInt(getAttr(document.body, 'height'))
   - target.offsetTop - parseInt(getAttr(header, 'height'));
  document.onmousemove = (event) => {
    // 鼠标移动时计算每次移动的距离,并改变拖拽元素的定位
    const disX = event.clientX - currentX;
    const disY = event.clientY - currentY;
    // 判断左、右边界
    if (disX < 0 && disX <= -minLeft) {
     target.style.left = `${left - minLeft)}px`;
    } else if (disX > 0 && disX >= maxLeft) {
     target.style.left = `${left + maxLeft}px`;
    } else {
     target.style.left = `${left + disX}px`;
    }
    // 判断上、下边界
    if (disY < 0 && disY <= -minTop) {
     target.style.top = `${top - minTop)}px`;
    } else if (disY > 0 && disY >= maxTop) {
     target.style.top = `${top + maxTop}px`;
    } else {
     target.style.top = `${top + disY}px`;
    }
    return false;
  };
}

这样注册之后就可以使用了:

<el-dialog v-drag title="对话框" :visible.sync="dialogVisible"></el-dialog>

总结

以上所述是小编给大家介绍的Vue 指令实现拖拽功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
XENON基于JSON变种
Jul 27 Javascript
JS 实现完美include载入实现代码
Aug 05 Javascript
jquery插件制作教程 txtHover
Aug 17 Javascript
js动画(animate)简单引擎代码示例
Dec 04 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
Dec 21 Javascript
js的对象与函数详解
Jan 21 Javascript
解决vue scoped html样式无效的问题
Oct 24 Javascript
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
解决Vue动态加载本地图片问题
Oct 09 #Javascript
Vue3 中的数据侦测的实现
Oct 09 #Javascript
vue3实现v-model原理详解
Oct 09 #Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 #Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 #Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 #Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 #Javascript
You might like
php按百分比生成缩略图的代码分享
2014/05/10 PHP
PHP内核探索之变量
2015/12/22 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
关于php几种字符串连接的效率比较(详解)
2017/02/22 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
js一组验证函数
2008/12/20 Javascript
jQuery select的操作实现代码
2009/05/06 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
解决PyCharm import torch包失败的问题
2018/10/13 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
python+flask实现API的方法
2018/11/21 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
python 画函数曲线示例
2019/12/04 Python
Python @property装饰器原理解析
2020/01/22 Python
python如何调用字典的key
2020/05/25 Python
python实现经纬度采样的示例代码
2020/12/10 Python
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
英国最受信任的在线眼镜商之一:Fashion Eyewear
2019/10/31 全球购物
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
交通事故赔偿协议书范本
2014/04/15 职场文书
促销活动计划书
2014/05/02 职场文书
社会实践活动报告
2015/02/05 职场文书
中学语文教学反思
2016/02/16 职场文书
go开发alertmanger实现钉钉报警
2021/07/16 Golang
python可视化之颜色映射详解
2021/09/15 Python
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android
mysql如何查询连续记录
2022/05/11 MySQL