前言
在前端开发中，实现拖拽功能是比较常见的需求，如果每次都从零开始编写代码，不仅浪费时间，还容易出错。这时，npm 包 dragui 就可以派上用场了。dragui 可以帮助我们快速实现元素的拖拽功能，使前端的开发效率大大提高。
本篇文章将介绍 dragui 的基本使用方法，包括安装、初始化、事件监听、样式修改等，供前端开发人员参考。
安装
在使用 dragui 之前，需要先安装它。可以使用 npm 工具来安装 dragui，命令如下：
npm install dragui --save
初始化
安装完成后，我们需要引入 dragui 库，并对需要实现拖拽功能的元素进行初始化。示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------------
------ ----------------
------------- -
------ ------
------- ------
----------------- ----
--------- ---------
---- ------
----- ------
------- -----
-
--------
-------
------
---- ---------------------------
------- --------------------------------------------------------
--------
----- ----------- - ---------------------------------------
----- ---- - ------------------- -
--------------- ------------------
------------ ---------- -
----------------- -------
--
---------- ---------- -
----------------- -----
-
--
---------
-------
-------上述代码中，我们首先定义了一个拥有默认样式的 div 元素，它将拥有拖拽功能。然后在 head 标签中添加了一些样式，指定了待拖拽元素的宽高、背景色、定位方式等。注意，在样式中添加了 cursor: move; 来表示鼠标在待拖拽元素上时显示为移动图标，增加用户体验。
在 body 标签的末尾，我们引入了 dragui 库，并通过执行 dragui(dragElement, options) 来初始化待拖拽元素。其中，dragElement 是指定实现拖拽功能的元素，options 则是配置项，用来指定一些拖拽过程中需要监听的事件等。
监听事件
下面，我们来看看常用的事件监听方法以及如何修改相应的样式。
1. onDragStart
在实现拖拽功能时，经常需要在拖拽开始时进行一些操作。例如，我们可以添加一个类名，表示元素正在被拖拽。示例如下：
const drag = dragui(dragElement, {
mouseDownClass: 'drag-mouse-down',
onDragStart: function() {
console.log('drag start')
this.element.classList.add('dragging')
},
})上述代码中，我们在 onDragStart() 中添加了一个类名 dragging，使用 this.element 来指代当前被拖拽的元素。接下来，我们可以在样式表中为该类名添加样式，使得拖拽时元素的样式发生变化：
.dragging {
box-shadow: 0 0 5px 2px rgba(0,0,0,0.3);
}这里我们为拖拽时的元素添加了一个半透明的阴影效果。
2. onDrag
在进行拖拽过程中，我们还需要对实时的拖拽事件进行监听，以便随时更新元素的位置或样式。onDrag() 就是用来完成这个功能的回调函数。示例如下：
-- -------------------- ---- -------
----- ---- - ------------------- -
--------------- ------------------
------------ ---------- -
--------------------------------------
--
------- ----------- -- -
--------------- ------- ------
---------------------- - - - ----
----------------------- - - - ----
-
--注意，这里的 x、y 值表示元素在拖拽时的位置坐标值，单位为像素。因此，我们可以使用 style.top 和 style.left 方法来修改被拖拽元素的位置。
3. onDragEnd
最后，在拖拽结束后，我们需要进行完善的处理，例如移除拖拽时添加的类名，上传数据等。onDragEnd() 就是用来完成这个功能的回调函数。示例如下：
-- -------------------- ---- -------
----- ---- - ------------------- -
--------------- ------------------
------------ ---------- -
--------------------------------------
--
------- ----------- -- -
---------------------- - - - ----
----------------------- - - - ----
--
---------- ---------- -
-----------------------------------------
-
--总结
使用 dragui，你可以轻松地实现拖拽功能，提高前端开发效率。本文简单介绍了 dragui 的基本使用方法，包括安装、初始化、事件监听、样式修改等。希望这篇文章对前端开发人员有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560b481e8991b448defba