写了好几次的PC端和移动端的拖拽效果了,每次都要重新查阅资料,现在做个总结记录,方便以后随时查阅
要想写拖拽事件,首先得了解三块知识点:
PC的鼠标拖动事件移动端的手指事件能拿到被移动元素的高宽,距离可移动范围内的距离
拖动事件与手指事件 顾名思义,就是通过不同的触发条件来达到你想实现的拖动效果,至于第三条的可移动范围,可以是 父级dom 的宽高,也可以是 可见的视口宽高,具体根据自己的需求定制,下面会提供对应获取方法
文章目录
PC端的拖拽事件移动端的手指事件拿到被移动元素的高宽,距离可移动范围内的距离视口高宽获取鼠标/手指移动的距离获取 dom 的宽高获取 dom 距离上下左右的距离移动 domPC端的拖拽事件
直说几个常用的,有兴趣可以去查阅所有 mouse 事件
如果是在框架内,比如 vue 中,可以直接使用 @+方法 即可调用(手指事件同理)
比如 @mousedown=“xxx”
mousedown:按下鼠标后触发mouseup:松开鼠标后触发mousemove:移动鼠标时触发mouseout:当鼠标离开当前对象时触发
移动端的手指事件
直说几个常用的,有兴趣可以去查阅所有 touch事件
vue 可以使用 @touchmove.prevent.top 触发手指事件
touchstart:触摸开始(手指放在触摸屏上)touchmove:拖动(手指在触摸屏上移动)touchend:触摸结束(手指从触摸屏上移开)touchenter :移动的手指进入一个dom元素touchleave :移动的手指离开一个dom元素
拿到被移动元素的高宽,距离可移动范围内的距离
视口高宽
先说说常用的视口高宽,因为每个浏览器都有自己的内核,所以需要考虑一定的兼容
**在IE中:**document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见区域高度document.documentElement.scrollTop =>窗口滚动条滚动高度**在FireFox中:**document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见区域高度document.documentElement.scrollTop =>窗口滚动条滚动高度**在chrome中:**document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见区域高度document.body.scrollTop =>窗口滚动条滚动高度**在Opera中:**document.body.clientWidth ==> 可见区域宽度document.body.clientHeight ==> 可见区域高度document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高
提供一段常用代码(获取视口高 宽)
let windowHeight =document.documentElement.clientHeight ||document.documentElement.clientHeight ||document.documentElement.clientHeight ||document.documentElement.clientHeight;let windowWidth =document.documentElement.clientWidth ||document.documentElement.clientWidth ||document.documentElement.clientWidth ||document.documentElement.clientWidth;
获取鼠标/手指移动的距离
可以通过 listener 获取到 event 来获取鼠标/手指移动距离
document.addEventListener("touchmove",(event) => {event.;event.touches[0].clientY;},false);
获取 dom 的宽高
如果移动范围是针对父级元素的而不是视口的,同样可以通过获取父级元素的宽高来限制移动范围
let movePj = document.querySelector("xxx");movePj.offsetHeight;movePj.offsetWidth;
获取 dom 距离上下左右的距离
该方法获取的是距离视口的相对距离,如果要获取父级的相对距离就要自己计算了
let movePj = document.querySelector("xxx");movePj .getBoundingClientRect().top;movePj .getBoundingClientRect().bottom;movePj .getBoundingClientRect().left;movePj .getBoundingClientRect().right;
移动 dom
最后就是我们的移动 dom 了,可以通过 transform 来实现
例如:
xxxxxxxxxx在计算结束以后我们需要移动我们的 dom元素 menu 需要横向移动 moveDistance(计算结果)那么可以这样写menu.style.transform = `translateX(${moveDistance}px)`;