如何用JavaScript实现网页元素的拖动与缓动效果？

本文共计1312个文字，预计阅读时间需要6分钟。

话不多说，先上效果，一个体验非常好的滑动缓动效果，让页面提升一个档次。这个效果看似简单，但实现起来却花了很长时间。为什么别人的滑动体验这么好呢？直到我自己动手实践，才真正理解其中的奥秘。

话不多说，先上效果，一个体验非常好的拖拽缓动的效果，让页面提升一个档次。

这个效果看似很简单，到也困惑了很长时间，为什么别人写出来的拖拽体验为什么这么好？
直到我自己实现了以后，才发现，原来我想的实现方式不对。接下来，我通过简短的几句话，来提供这个功能的实现思路。

首先，我们要明白，我们鼠标拖拽是在一个2d平面上拖拽
2d平面只有x轴和y轴，而且获取的拖拽值也是基于平面的像素获取的。所以，我们第一步，先通过鼠标事件来获取到当前的拖拽的长度像素。

首先，绑定鼠标按下事件，来获取到鼠标基于浏览器窗口左上角的xy平面二维坐标。

然后，绑定move事件，在move事件回调内获取到鼠标拖拽的坐标，和按下坐标相减，求出拖拽的距离。