前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue拖拽指令

vue拖拽指令

作者头像
wade
发布2021-01-24 22:27:09
1K0
发布2021-01-24 22:27:09
举报
文章被收录于专栏:coding个人笔记

自己一直很想做个拖拽生成静态页面的东西,说简单也简单,这个东西按道理用jsx语法是最好的,用render方法渲染生成的json。只是自己对这块还是没信心。今天写个vue的拖拽指令,顺便理一下offsetX、pageX、clientX、screenX这几个属性,一直记不住。

先大概记一下这几个的翻译(应该是正确的):

offset:偏移;client:客户;page:页面;screen:屏幕;

offsetX:相对于触发元素的偏移距离;

clientX:相对于客户端浏览器的距离,可以理解成相对于地址栏以下的区域;

pageX:相对于整个页面的距离,比clientX要加上滚动条移动的距离;

screenX:相对于整个屏幕的距离,包含地址栏;

搞明白了这几个相对的距离,就比较容易计算拖拽的距离了。很早之前就分享过拖拽的一个简单demo,拖拽指令也很简单

代码语言:javascript
复制
Vue.directive('draggable', {  inserted: function (el,data) {    el.style.position = 'absolute';    el.style.cursor = 'move';    el.onmousedown = function(event){      let startX = event.clientX;      let startY = event.clientY;      let left = el.offsetLeft;      let top = el.offsetTop;      document.onmousemove = function(event){        let X = event.clientX - startX        let Y = event.clientY - startY;        el.style.left = `${X + left}px`;        el.style.top = `${Y + top}px`;      }      document.onmouseup = function(){        document.onmousemove = document.onmouseup = null;      };    }  }})

这边只需要注意把监听元素绑定在document上,另外就是鼠标抬起的时候就移除监听。使用的时候:

代码语言:javascript
复制
<div v-draggable>请拖拽</div>

这是最基础版的,不同需求可能会有不一样的条件,比如移动的距离是否可以小于0,或者限制在某个相对定位relative框里面,这时候是否限制最大最小的移动距离,可以通过传参还是传递元素之类的方法去实现。

(完)

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-01-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 coding个人笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档