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编程起步(第四课)
Feb 27 Javascript
推荐dojo学习笔记
Mar 24 Javascript
jquery text,radio,checkbox,select操作实现代码
Jul 09 Javascript
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
js的OOP继承实现(必看篇)
Feb 18 Javascript
vue通过数据过滤实现表格合并
Nov 30 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 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
Joomla下利用configuration.php存储简单数据
2010/05/19 PHP
PHP获取表单textarea数据中的换行问题
2010/09/10 PHP
详解php的socket通信
2015/08/11 PHP
关于php中一些字符串总结
2016/05/05 PHP
php简单复制文件的方法
2016/05/09 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
jquery操作select option 的代码小结
2011/06/21 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
浅析JS运动
2015/12/28 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
node获取客户端ip功能简单示例
2019/08/24 Javascript
nodejs dgram模块广播+组播的实现示例
2019/11/04 NodeJs
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
Django中的文件的上传的几种方式
2018/07/23 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
Apache部署Django项目图文详解
2019/07/30 Python
Python谱减法语音降噪实例
2019/12/18 Python
Oracle的内存结构(Memory structures)
2015/06/10 面试题
公司综合部的成员自我评价分享
2013/11/05 职场文书
《少年王冕》教学反思
2014/04/11 职场文书
投标诚信承诺书
2014/05/26 职场文书
乡镇爱国卫生月活动总结
2014/06/25 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
行政处罚事先告知书
2015/07/01 职场文书
导游词之台湾安平古堡
2019/12/25 职场文书