作为一名前端打工人，你大概率遇到过这样的需求：实现一个可拖拽的小组件，图标嘛~找设计师要一个就 OK 了，但是拖拽效果呢？要怎么做？ easy-drag 就是为解决这个问题诞生的！

原理

首先我们要确定怎样实现拖拽效果，这里无非就两种：

一种是利用绝对定位，拖拽时调整top和left值，但是这种方案依赖父组件的定位方式

另一种是利用transform，在元素原先位置的基础上进行位移

这里我们当然要选择后者这种最“安全无公害”的方案。

实现

大致方案确定了，具体的实现就是细枝末节了，但是需要注意的点还是不少的：

元素原先有 transform 属性怎么办？

因为元素原先是可以设置transform属性的，所以我们设置的transform属性必须要在元素样式的transform基础上叠加，所以需要用到 window.getComputedStyle(element).transform，然后拼接transform属性

元素怎么跑偏了？

原因是拼接transform属性时将拖拽的translate拼接到了原有的transform值后面，而原有的ratate会将元素的坐标系旋转，导致再施加平移效果时就会“跑偏”。

将平移效果加到原有transform值前面就可以避免这个问题。

最终效果

是不是如丝般顺滑，因为transform属性会使浏览器为元素单独生成图层，而通过transform修改元素的位置时只会触发浏览器的重新合成图层，并不会触发重排重绘，所以自然非常顺滑~

使用方式

安装

npm i easy-drag

使用

importenableDragfrom'easy-drag';constdisableDrag=enableDrag(document.querySelector('.draggable'));disableDrag();

功能

easy-drag 支持取消拖拽

easy-drag 支持设置拖拽范围，默认不可超出document.body

easy-drag 支持设置拖拽点，使用以下的场景：弹窗需要设置为可拖拽的，但只能拖拽标题区域

easy-drag 支持设置自定义回调，包含onDragStart、onDrag、onDragEnd

Github

easy-drag: https://github.com/junqiuzhang/easy-drag