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 相关文章推荐
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
js与applet相互调用的方法
Jun 22 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
js实现省市级联效果分享
Aug 10 Javascript
JavaScript实现短信倒计时60s
Oct 09 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
Element Backtop回到顶部的具体使用
Jul 27 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
Laravel实现用户注册和登录
2015/01/23 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
javascript正则表达式总结
2016/02/29 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python 爬虫模拟登陆知乎
2016/09/23 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
Python实现的人工神经网络算法示例【基于反向传播算法】
2017/11/11 Python
python实现决策树
2017/12/21 Python
python解析含有重复key的json方法
2019/01/22 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
Python实现ATM系统
2020/02/17 Python
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
《青海高原一株柳》教学反思
2014/04/25 职场文书
竞选团支书演讲稿
2014/04/28 职场文书
青年标兵事迹材料
2014/08/16 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
婚前保证书范文
2015/02/28 职场文书
从事会计工作年限证明
2015/06/23 职场文书
2019广播稿怎么写
2019/04/17 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技