前言
随着 Web 技术的发展，现在的网站越来越富有交互性。其中拖拽功能无疑是最为常见也最为实用的功能之一。那么在前端实现拖拽功能，我们有什么好的方法呢？
这里介绍一个 npm 包 dragging.js，它是一个轻量级的 JavaScript 库，提供了简单易用的拖拽功能，是我们实现拖拽功能的不二之选。接下来，我们就来了解一下这个 npm 包的使用方法。
安装
npm 包 dragging.js 可以通过 npm 进行安装。打开命令行工具，输入以下命令：
npm install dragging.js
然后我们需要在 HTML 文件中引用它。在 <head> 标签中添加以下代码：
<script src="./node_modules/dragging.js/dist/dragging.min.js"></script>
使用方法
基本用法
使用 dragging.js 实现拖拽非常简单。我们只需要为需要拖拽的元素添加 draggable 类名即可。
例如，我们有一个 div 元素：
<div class="drag">请拖动我</div>
我们只需要为其添加 draggable 类名即可：
<div class="drag draggable">请拖动我</div>
上面的例子中，我们只是实现了拖拽功能，但是并没有实现拖拽后的效果。下面，我们来看一下如何实现拖拽后的效果。
拖拽后的效果
当我们拖拽元素时，一般会希望元素在拖拽过程中有一个实时的跟随，这就需要对拖拽对象进行特殊设置。我们可以在拖拽对象上添加 data-dragging 属性，并设置拖拽过程中的样式。
下面是一个完整的实例：
-- -------------------- ---- -------
-------
----- -
--------- ---------
----- ------
---- ------
------ ------
------- ------
----------------- -----
------ -----
----------- -------
------------ ------
-
-- -------- --
-------------------- -
-------- ----
----------- - - --- -----
-
--------
---- ----------- ---------- --------------------------------
--------
-- ---
----- ---- - --- ---------------------- -------- -- -
---------------------------------- --------
-- -------- -- -
---------------------------------- ---------
---
---------我们可以在 data-dragging 属性上使用不同的值来实现不同的样式。上面的例子，当 data-dragging 的值为 true 时，我们设置了元素的透明度和阴影。
拖拽的限制
有时候，我们希望拖拽的元素仅在特定区域内拖动。这时，我们可以使用 dragging.js 提供的 constraints 选项来限制拖拽范围。
-- -------------------- ---- -------
-------
-------- -
--------- ---------
------ ------
------- ------
----------------- --------
-
----- -
--------- ---------
----- ------
---- ------
------ ------
------- ------
----------------- -----
------ -----
----------- -------
------------ ------
-
--------
---- -------------
---- ----------- ---------------------
------
--------
----- ---- - --- ---------------------- -------- -- -
---------------------------------- --------
-- -------- -- -
---------------------------------- ---------
-- -
------------ -
----- --
------ ----
---- --
------- ---
-
---
---------上面的例子，我们将被拖拽的元素限制在了 #wrapper 容器内。
拖拽的吸附
有时候，我们会希望拖拽的元素在接近某一个元素时自动吸附过去。这时，我们可以使用 dragging.js 提供的 snap 选项来实现吸附效果。
-- -------------------- ---- -------
-------
-------- -
--------- ---------
------ ------
------- ------
----------------- --------
-
----- -
--------- ---------
----- ------
---- ------
------ ------
------- ------
----------------- -----
------ -----
----------- -------
------------ ------
-
------- -
--------- ---------
----- ------
---- ------
------ ------
------- ------
----------------- -----
------ -----
----------- -------
------------ ------
-
--------
---- -------------
---- ----------- ---------------------
---- -------------------------
------
--------
----- ---- - --- ---------------------- -------- -- -
---------------------------------- --------
-- -------- -- -
---------------------------------- ---------
-- -
----- ---------
---
---------上面的例子，被拖拽的元素会在接近 .target 元素时自动吸附过去。
总结
使用 npm 包 dragging.js 可以轻松实现网站的拖拽功能，它不仅功能强大、使用方便，而且性能优越。我们可以使用 draggable 类名来实现元素的拖拽，使用 data-dragging 属性来实现拖拽过程中的效果，使用 constraints 选项来实现拖拽的限制，使用 snap 选项来实现拖拽的吸附。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f781e8991b448e0c41