vue全局自定义指令-元素拖拽的实现代码


Posted in Javascript onApril 14, 2019

 小白我用的是vue-cli的全家桶,在标签中加入v-drap则实现元素拖拽, 全局指令我是写在main.js中

Vue.directive('drag', {
 inserted: function (el) {
  el.onmousedown=function(ev){
   var disX=ev.clientX-el.offsetLeft;
   var disY=ev.clientY-el.offsetTop;
   document.onmousemove=function(ev){
    var l=ev.clientX-disX;
    var t=ev.clientY-disY;
    el.style.left=l+'px';
    el.style.top=t+'px';
   };
   document.onmouseup=function(){
    document.onmousemove=null;
    document.onmouseup=null;

   };
  };
 }

})

后面肯定要补充放大缩小功能,和把定位,宽度信息保留到vuex中的state中

pS:下面看下面板拖拽之vue自定义指令,具体内容如下所述:

前言

在指令里获取的this并不是vue对象,vnode.context才是vue对象,一般来说,指令最好不要访问vue上的data,以追求解耦,但是可以通过指令传进来的值去访问method或ref之类的。

vue指令

官方文档其实已经解释的蛮清楚了,这里挑几个重点的来讲。

1 arguments

el: 当前的node对象,用于操作dom

binding:模版解析之后的值

vNode: Vue 编译生成的虚拟节点,可以在上面获取vue对象

oldVnode: 使用当前指令上一次变化的node内容

2。 生命周期

bind: 初始化的时候调用,但这时候node不一定渲染完成

inserted: 被绑定元素插入父节点时调用,关于dom操作尽量在这里用

update:就是内部this.update时会触发这里

面板拖拽逻辑

使用relative,舰艇event上的clientX和clientY鼠标距离页面的位置来改变面板的top和left。

涉及属性

offsetLeft:距离参照元素左边界偏移量
offsetTop:距离参照元素上边界偏移量
clientWidth:此属性可以返回指定元素客户区宽度
clientHeight: 此属性可以返回指定元素客户区高度
clientX:事件被触发时鼠标指针相对于浏览器页面(或客户区)的水平坐标
clientY: 事件被触发时鼠标指针相对于浏览器页面(或客户区)的垂直坐标
onmousedown:鼠标按下事件
onmousemove: 鼠标滑动事件
onmouseup: 鼠标松开事件

实现代码

<div v-drag="'refName'"></div>

在绑定的组件上使用,value非必选项,不挑就默认是基于document的移动

directives: {
 drag: {
  // 使用bind会有可能没有渲染完成
  inserted: function(el, binding, vnode) {
  const _el = el; //获取当前元素
  const ref = vnode.context.$refs[binding.value]; // 判断基于移动的是哪一个盒子
  const masterNode = ref ? ref : document; // 用于绑定事件
  const masterBody = ref ? ref : document.body; // 用于获取高和宽
  const mgl = _el.offsetLeft;
  const mgt = _el.offsetTop;
  const maxWidth = masterBody.clientWidth;
  const maxHeight = masterBody.clientHeight;
  const elWidth = _el.clientWidth;
  const elHeight = _el.clientHeight;
  let positionX = 0,
   positionY = 0;
  _el.onmousedown = e => {
   //算出鼠标相对元素的位置,加上的值是margin的值
   let disX = e.clientX - _el.offsetLeft + mgl; 
   let disY = e.clientY - _el.offsetTop + mgt;
   masterNode.onmousemove = e => {
   //用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
   let left = e.clientX - disX;
   let top = e.clientY - disY;
   // 绑定的值不能滑出基于盒子的范围
   left < 0 && (left = 0);
   left > (maxWidth - elWidth - mgl) && (left = maxWidth - elWidth - mgl);
   top < 0 && (top = 0);
   top > (maxHeight - elHeight - mgt) && (top = maxHeight - elHeight - mgt);
   //绑定元素位置到positionX和positionY上面
   positionX = top;
   positionY = left;
   
   //移动当前元素
   _el.style.left = left + "px";
   _el.style.top = top + "px";
   };
   // 这里是鼠标超出基于盒子范围之后再松开,会监听不到
   document.onmouseup = e => {
   masterNode.onmousemove = null;
   document.onmouseup = null;
   };
  };
  }
 }
 }

总结

以上所述是小编给大家介绍的面板拖拽之vue自定义指令实例详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
AngularJS向后端ASP.NET API控制器上传文件
Feb 03 Javascript
javascript实现标签切换代码示例
May 22 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
360doc网站不登录就无法复制内容的解决方法
Jan 27 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
详解django模板与vue.js冲突问题
Jul 07 Javascript
JavaScript 原型与原型链详情
Nov 02 Javascript
vue自定义指令之面板拖拽的实现
Apr 14 #Javascript
详解Vue组件之间通信的七种方式
Apr 14 #Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 #Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 #Javascript
详解如何理解vue的key属性
Apr 14 #Javascript
axios+Vue实现上传文件显示进度功能
Apr 14 #Javascript
Vue 使用formData方式向后台发送数据的实现
Apr 14 #Javascript
You might like
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
php实现小程序支付完整版
2018/10/09 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
python读取中文txt文本的方法
2018/04/12 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
Python生成短uuid的方法实例详解
2018/05/29 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
Python实现快速排序的方法详解
2019/10/25 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
Python 操作 MySQL数据库
2020/09/18 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
司机检讨书
2014/02/13 职场文书
2014年社区庆元旦活动方案
2014/03/08 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
大学生第一学年自我鉴定2015
2014/09/28 职场文书
代办社保委托书范文
2014/10/06 职场文书
先进工作者事迹材料
2014/12/23 职场文书
老兵退伍感言
2015/08/03 职场文书
高中生社会实践心得体会
2016/01/14 职场文书
使用goaccess分析nginx日志的详细方法
2021/07/09 Servers
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python