dom 拖拽样式_使用css-transform实现更好的拖拽功能

拖拽功能是目前网页上一种非常常见的功能，例如“登录弹窗”的拖拽。本文将使用transform来实现这一功能。

一、拖拽的用户行为分析与原理解析

二、代码实现

三、总结

本文所涉及的案例可能会用到的一些必备的知识点：
1、JavaScript中的DOM2级事件绑定
2、正则的编写与匹配
3、获取元素计算后的样式的相关API
4、鼠标坐标的位置获取
5、ES6的模板字符串语法
6、另外，为了能够顺利使用到transform，读者可能还需要对CSS3的一些样式规则有些了解

因此，如果读者对以上这些知识点的了解还有欠缺，可以在在此之前捎带预习一下。

另外，本文配套的这个案例虽然采用的webpack构建运行，但核心代码与之无关。
如果读者不熟悉webpack的构建方式，也不用担心会看不懂代码。

文章内容难度：☆

一、拖拽的用户行为分析与原理解析

如果读者熟悉了这个过程并也熟知了其中的原理，可以忽略此部分

拖拽的整个过程大致可以使用此图来描述：