阅读 21

vue自定义指令的应用,vuemounted方法

自己一直拖动静态页面&; 我想制作放下后生成的东西。 我说过很简单很容易。 这是按道理使用jsx句法最好的。 用render方法渲染生成的json。 只是,自己对这个没有信心。 今天写vue的拖动命令,顺便整理一下offsetX、pageX、clientX、screenX的几个属性,一直记不住。

首先,请记住这几个翻译(应该是正确的)。

偏移:偏移; 客户端:客户页面:页面屏幕:屏幕;

offsetX :与触发要素的偏移距离;

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

pageX :对于页面整体的距离,从clientX加上滚动条移动的距离

screenX :包括相对于整个画面的距离、地址栏

了解它们的相对距离后,就更容易计算拖动的距离了。 虽然以前就共享了拖动的简单demo,但是拖动命令也很简单:

VUE.directive(draggable ),{ inserted : function } El,data ).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 ) ) letx=event.clientx-startx lety=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框中。 此时,是否限制最大最小的移动距离可以通过传递参数或传递元素等方法来实现。


文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐