vue拖拽指令之offsetX、clientX、pageX、screenX

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

先大概记一下这几个的翻译（应该是正确的）：
offset：偏移；client：客户；page：页面；screen：屏幕；

offsetX：相对于触发元素的偏移距离；
clientX：相对于客户端浏览器的距离，可以理解成相对于地址栏以下的区域；
pageX：相对于整个页面的距离，比clientX要加上滚动条移动的距离；
screenX：相对于整个屏幕的距离，包含地址栏；

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

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 - startXlet 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上，另外就是鼠标抬起的时候就移除监听。使用的时候：

请拖拽

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

vue拖拽指令之offsetX、clientX、pageX、screenX相关推荐

Js event对象offsetX, clientX, pageX, screenX, layerX, x区别（图解）
简介因为实际开发中,很少用到event对象的这几个值,每当写的时候又记不清,然后就要浪费时间去查找准确的资料,很是不爽,所以就做个记录~话不多说,直接上图(ps:图是网上找的,如果侵权,可立马删除) ...
event对象的offsetX, clientX, pageX, screenX
现在需要对event对象的几大与坐标有关的属性做一个总结,以便于认识 offsetX|offsetY offsetX/Y获取到是触发点相对被触发dom的左上角距离(包括padding在内,不包括bor ...
图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
通过 3 张图和 1 张表格,轻松区别 Javascript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性. 一.测试代码如下: & ...
html5 offsetx,event对象中offsetX,clientX,pageX,screenX的区别
1.offsetX offset意为偏移量,是事件对象距左上角为参考原点的距离.以元素盒子模型的内容区域的左上角为参考点.不包括border. 2.clientX 事件对象相对于浏览器窗口可视区域的X ...
一张图看懂offsetX, clientX, pageX, screenX的区别
1.具体含义见下图1 2.浏览器的兼任情况更多专业前端知识,请上 [猿2048]www.mk2048.com
vue实现PS效果，鼠标拖拽指令、十字辅助线、鼠标选点、打印页面指定内容、生成随机id、颜色选择器、div上输入文字（类似QQ截图输入文字）、vue图片上传转base64...
因为涵盖的小细节比较多,所以代码比较长,建议大家复制运行来进行对应功能查看,我在代码中添加了大量的注释,以供大家阅读代码最终效果部分细节 1.鼠标选点时可能会超出底图位置 2.图片的backgro ...
vue的移动app项目中，自定义拖拽指令的问题
使用vue的都知道vue有一个自定义指令,我比较喜欢的就是拖拽的自定义指令,感觉挺方便的! //组件内的拖拽指令 directives: {//组建内自定义指令drag: {// 指令的定义bind: ...
基于Vue实现拖拽效果以及解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突
本人在开发中遇到实现一个基于vue的悬浮框拖动效果,经过努力研究最终实现了功能,一下是我的方法和部分代码,希望对您有所帮助,如有不对的地方还请指出.谢谢!下面步入正题: 首先展示一下功能的效果图: 要 ...
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突
功能描述: 如图,右侧悬浮菜单按钮,只支持上下方向拖动,点击时展开或关闭菜单. BUG说明: 鼠标上下方向拖拽,如果松开时鼠标位于悬浮按钮上会默认执行click事件,经验证,click事件与mouse ...

vue拖拽指令之offsetX、clientX、pageX、screenX

vue拖拽指令之offsetX、clientX、pageX、screenX相关推荐

最新文章

热门文章