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框中。 此时，是否限制最大最小的移动距离可以通过传递参数或传递元素等方法来实现。