写了好几次的PC端和移动端的拖拽效果了，每次都要重新查阅资料，现在做个总结记录，方便以后随时查阅

要想写拖拽事件，首先得了解三块知识点：

PC的鼠标拖动事件
移动端的手指事件
能拿到被移动元素的高宽，距离可移动范围内的距离

拖动事件与手指事件顾名思义，就是通过不同的触发条件来达到你想实现的拖动效果，至于第三条的可移动范围，可以是父级dom 的宽高，也可以是可见的视口宽高，具体根据自己的需求定制，下面会提供对应获取方法

文章目录

PC端的拖拽事件
移动端的手指事件
拿到被移动元素的高宽，距离可移动范围内的距离

PC端的拖拽事件

直说几个常用的，有兴趣可以去查阅所有 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 来获取鼠标/手指移动距离

扫描二维码关注公众号，回复： 11738518 查看本文章

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 来实现
例如：

xxxxxxx
xxx
在计算结束以后我们需要移动我们的 dom元素 menu 需要横向移动 moveDistance（计算结果）那么可以这样写
menu.style.transform = `translateX(${
      
      moveDistance}px)`;

JS拖动事件（鼠标拖动事件）&手指事件（PC移动端拖拽）