前言
在前端页面中，经常会遇到需要拖拽某个元素的情况。一般情况下，我们可以通过写一些鼠标事件的 JavaScript 代码来实现这个功能。但是，这种方式需要编写大量的重复代码，而且也不方便维护和扩展。因此，我们可以选择使用一些成熟的 npm 包来帮助我们实现这个功能。
其中，一个比较常用的 npm 包就是 drag-it。这个包提供了一些封装好的 API，可以帮助我们快速地实现拖拽功能。本文将介绍 drag-it 的使用方法，并提供一些示例代码帮助大家更好地了解这个包。
安装
要使用 drag-it，首先需要在你的项目中安装这个包。你可以通过 npm 安装，也可以手动下载源代码并使用。
通过 npm 安装：
npm install drag-it
使用方法
使用 drag-it 实现拖拽功能非常简单。只需要在需要拖拽的元素上添加 drag-it 类名，然后在 JavaScript 中实例化 Drag 类并将元素传递给它即可。
<div class="drag-it"></div>
import Drag from 'drag-it';
const element = document.querySelector('.drag-it');
new Drag(element);上述代码会使 .drag-it 元素成为可拖拽的。你可以尝试在浏览器中拖拽这个元素，看看效果。
配置项
除了默认的配置项外，drag-it 还提供了一些可配置的选项，以满足不同的需求。
handle
handle 选项用于指定触发拖拽的元素，可以是任意一个存在于拖拽元素内部的元素。例如：
<div class="drag-it"> <header class="handle">Drag Me</header> <div class="content"></div> </div>
import Drag from 'drag-it';
const element = document.querySelector('.drag-it');
const options = {
handle: '.handle'
};
new Drag(element, options);上述代码会指定 .handle 元素为拖拽触发元素。这意味着只有拖拽 .handle 元素才能拖动整个 .drag-it 元素。
container
container 选项用于指定限制拖拽的范围，只有在 container 范围内才能进行拖拽。例如：
<div class="container"> <div class="drag-it"></div> </div>
import Drag from 'drag-it';
const element = document.querySelector('.drag-it');
const container = document.querySelector('.container');
const options = {
container: container
};
new Drag(element, options);上述代码会将拖拽范围限制在 .container 元素内。
onStart 和 onEnd
onStart 和 onEnd 函数分别在拖拽开始和结束时触发，并且会传递一个参数，参数是元素相对于拖拽开始时的位置偏移量。例如：
-- -------------------- ---- -------
------ ---- ---- ----------
----- ------- - -----------------------------------
----- ------- - -
-------- -------- -- -
--------------------
--
------ -------- -- -
--------------------
-
--
--- ------------- ---------上述代码会在拖拽开始和结束时分别输出元素相对于拖拽开始时的位置偏移量。
示例代码
以下是一个完整的示例代码，用于演示一个拖拽 div 的实现方法。
-- -------------------- ---- -------
--------- -----
------
------
----------- -- ---------------
-------
-------- -
--------- ---------
------ ------
------- ------
----------- ------
------- -----
-
--------
-------
------
---- ----------------------
------- ------------------------------------------------------
--------
----- ------- - -----------------------------------
----- ------- - ---
--- ------------- ---------
---------
-------
-------在浏览器中打开这个页面，你可以看到一个可拖拽的 div。你可以尝试拖动这个 div，看看效果。
总结
使用 npm 包 drag-it 可以快速地实现拖拽功能。drag-it 提供了一些可配置的选项，以满足不同的需求。通过本文的介绍和示例代码，相信大家已经了解了 drag-it 的基本用法。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a8781e8991b448d808b