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的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
ParseInt函数参数设置介绍
Jan 02 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
前端页面文件拖拽上传模块js代码示例
May 19 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
Vue实现PopupWindow组件详解
Apr 28 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 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
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
js轮播图代码分享
2016/07/14 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
JS实现拼图游戏
2021/01/29 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
Python脚本实现格式化css文件
2015/04/08 Python
Python赋值语句后逗号的作用分析
2015/06/08 Python
Python错误处理操作示例
2018/07/18 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
打架检讨书2000字
2014/02/22 职场文书
授权委托书协议书
2014/10/16 职场文书
运动会表扬稿
2015/01/16 职场文书
学习经验交流会策划书
2015/11/02 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
vue2实现provide inject传递响应式
2021/05/21 Vue.js
pandas进行数据输入和输出的方法详解
2022/03/23 Python