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

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

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

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

文章目录

PC端的拖拽事件
移动端的手指事件
拿到被移动元素的高宽，距离可移动范围内的距离
- 视口高宽
- 获取鼠标/手指移动的距离
- 获取 dom 的宽高
- 获取 dom 距离上下左右的距离
- 移动 dom

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 来获取鼠标/手指移动距离

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移动端拖拽）相关推荐

html手机模块化,jQuery 移动端拖拽（模块化开发，触摸事件，webpack）
通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). ...
span标签的鼠标滑入提示_彻底搞懂拖拽——基于鼠标事件的拖拽以及基于HTML5 API的拖拽...
一.基于鼠标事件的拖拽原理--onmousedown.onmousemove.onmouseup onmousedown 该事件会在鼠标按键被按下时触发支持该事件的HTML标签: html < ...
jquery 手指滑动多半屏_JS拖拽专题(五)——「玩出花儿来」移动端滑动事件的封装...
欢迎来到我的JS拖拽专题系列文章,本章节将是拖拽系列的最后一篇.感谢大家的支持^_^ 上一章节我们说到了拖拽让图片相互之间交换位置,相对来说是一个比较综合的示例,涉及到了矩形的碰撞检测,勾股定理计算两 ...
android div拖动排序,鼠标拖动实现DIV排序示例代码
先上效果图: 对比传统的排序,这是一个很不错的尝试,希望对大家有启发. 大家可以参考我的上一篇博文:https://www.jb51.net/article/42087.htm html部分: 指标: ...
html拖动文件读取文件内容,HTML5新功能之文件拖拽上传
当我们使用邮箱添加附件时,会看到提示我们将文件放到相应区域,如图: 当我们将拖拽文件悬停在相应区域后会进一步提示我们,放下鼠标,如图: 下面我们将进一步的了解下此过程,并实现该效果. 首先我们先了解下 ...
hammer.js移动端拖拽缩放旋转元素
第一步下载hammer.js并引入下载地址可以是:http://hammerjs.github.io/ 第二步复制下面这些代码,放在你的js里面 function drag(drag){var ...
js监听鼠标拖动事件(按住左键拖动触发，松开左键取消)
此段代码,实现了左键点击id元素内区域后,拖动鼠标到边缘区域滚动条(内部class元素的滚动条)自动滚动,松开鼠标后取消事件业务需要记录一下 $(function () {var div=docum ...
css 鼠标滚动事件,js监听鼠标的滚轮滚动事件教程
不同的有不同的滚轮事件.主要是有两种,onmousewheel(firefox不支持)和dommousescroll(只有firefox支持),关于这两个事件这里不做详述,想要了解的朋友请移步:鼠标滚 ...
js html表单设计器,可视化表单设计器拖拽生成表单(原创)
插件描述:可以通过拖拽的方式快速创建表单,提高开发者对表单的开发效率,节省开发者的时间. 更新时间:2021-04-11 21:56:01 form-create-designer form-crea ...

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