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 相关文章推荐
Prototype 学习 工具函数学习($方法)
Jul 12 Javascript
javascrip关于继承的小例子
May 10 Javascript
html+js实现动态显示本地时间
Sep 21 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
javascript日期格式化方法小结
Dec 17 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
Dec 20 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
Vue中keep-alive的两种应用方式
Jul 15 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
php部分常见问题总结
2008/03/27 PHP
用PHP实现递归循环每一个目录
2010/08/08 PHP
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
解决vue 引入子组件报错的问题
2018/09/06 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
浅谈Python基础之I/O模型
2017/05/11 Python
Python装饰器用法实例总结
2018/02/07 Python
jupyter 导入csv文件方式
2020/04/21 Python
python相对企业语言优势在哪
2020/06/12 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
质检部部长职责
2013/12/16 职场文书
火车的故事教学反思
2014/02/11 职场文书
致运动员赞词
2015/07/22 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
用JS写一个发布订阅模式
2021/11/07 Javascript
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js