基于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 相关文章推荐
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
玩转方法:call和apply
May 08 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 Javascript
新手vue构建单页面应用实例代码
Sep 18 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 Javascript
了解JavaScript中的选择器
May 24 Javascript
详解vue路由
Aug 05 Javascript
解决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
一个程序下载的管理程序(二)
2006/10/09 PHP
php正则校验用户名介绍
2008/07/19 PHP
php数字游戏 计算24算法
2012/06/10 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
通过DOM脚本去设置样式信息
2010/09/19 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
python通过yield实现数组全排列的方法
2015/03/18 Python
Django发送html邮件的方法
2015/05/26 Python
浅谈python中的正则表达式(re模块)
2017/10/17 Python
解决pycharm无法调用pip安装的包问题
2018/05/18 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
python使用KNN算法识别手写数字
2019/04/25 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
flask实现验证码并验证功能
2019/12/05 Python
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
Yahoo-PHP面试题3
2012/01/14 面试题
咖啡厅创业计划书范本
2014/01/22 职场文书
开服装店计划书
2014/08/15 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
个人买房协议书范本
2014/10/06 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python