1. 是什么?
d-dragdrop 是一个轻量级的，基于原生JS的拖拽库，能够实现页面元素的拖拽，支持 drag、startDrag、endDrag 等事件。在前端开发中，拖拽是一个常见的功能，它可以提升更好的用户体验。d-dragdrop 可以使我们轻松地实现拖拽功能，而不用自己动手写轮子。
2. 安装
使用 npm 来安装 d-dragdrop 包:
--- ------- ----------
3. 如何使用?
使用前，你需要先将 d-dragdrop 引入到你的项目中：
------- ---------------------------------------------------------
3.1 基础用法
- 给需要拖拽的元素设置
draggable="true" - 创建一个新的实例
--- ---- - ---------------------------------------------- --- -- - --- -------------------------
3.2 事件
实例支持多种事件，以下是一些已知事件：
dragstart：开始拖拽触发的事件。dragenter：拖拽元素进入目标区域触发的事件。dragover：拖拽元素经过目标区域触发的事件。dragleave：拖拽元素离开目标区域触发的事件。drop：拖拽元素在目标区域松开鼠标触发的事件。dragend：拖拽结束触发的事件。
下面是一个示例，演示如何使用 dragend：
--- ---- - ----------------------------------------------
--- -- - --- -------------------------
---------------- ---------- -
---------------------
---3.3 选项
d-dragdrop 允许你选择一些选项来定制拖拽的行为。以下是一些可用选项及其默认值：
mouseTrigger：拖动所需按下的鼠标键，为0时表示使用任何鼠标但不包括Ctrl或Meta键（默认值：0）。ghosting：在拖动元素和鼠标指针之间创建副本以实现“幽灵效果”（即拖动元素将 display 设置为 none，使用鼠标移动虚影模拟伪装效果）。将其设置为false可禁用此功能（默认值：true）。revert：在 drop 操作失败时，是否应将拖动元素重置为初始位置（默认值：false）。
--- ---- - ----------------------------------------------
--- -- - --- ------------------------ -
------------- -- -- ------- -
--------- ------ -- ------- ----
------- ---- -- ------- -----
---拖拽结束后，你可以使用以下代码，禁用拖拽：
-------------
4. 结论
d-dragdrop 能够轻松地实现前端页面元素拖拽的功能，而不用自己动手写轮子。在开发中，主要通过设置一些选项和事件来定制拖拽行为，而且使用也不难。希望对你有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005518c81e8991b448cee15