npm 包 d-dragdrop 使用教程-JavaScript中文网-JavaScript教程资源分享门户

1. 是什么?

d-dragdrop 是一个轻量级的，基于原生JS的拖拽库，能够实现页面元素的拖拽，支持 drag、startDrag、endDrag 等事件。在前端开发中，拖拽是一个常见的功能，它可以提升更好的用户体验。d-dragdrop 可以使我们轻松地实现拖拽功能，而不用自己动手写轮子。

2. 安装

使用 npm 来安装 d-dragdrop 包:

npm install d-dragdrop

3. 如何使用?

使用前，你需要先将 d-dragdrop 引入到你的项目中：

<script src="path/to/d-dragdrop/dist/d-dragdrop.min.js"></script>

3.1 基础用法

给需要拖拽的元素设置 draggable="true"
创建一个新的实例

var elem = document.getElementById('myDraggableElement');
var dd = new ddragdrop.DragDrop(elem);

3.2 事件

实例支持多种事件，以下是一些已知事件：

dragstart：开始拖拽触发的事件。
dragenter：拖拽元素进入目标区域触发的事件。
dragover：拖拽元素经过目标区域触发的事件。
dragleave：拖拽元素离开目标区域触发的事件。
drop：拖拽元素在目标区域松开鼠标触发的事件。
dragend：拖拽结束触发的事件。

下面是一个示例，演示如何使用 dragend：

var elem = document.getElementById('myDraggableElement');
var dd = new ddragdrop.DragDrop(elem);

dd.on('dragend', function() {
    console.log('拖拽结束!');
});

3.3 选项

d-dragdrop 允许你选择一些选项来定制拖拽的行为。以下是一些可用选项及其默认值：

mouseTrigger：拖动所需按下的鼠标键，为 0 时表示使用任何鼠标但不包括 Ctrl 或 Meta 键（默认值：0）。
ghosting：在拖动元素和鼠标指针之间创建副本以实现“幽灵效果”（即拖动元素将 display 设置为 none，使用鼠标移动虚影模拟伪装效果）。将其设置为 false 可禁用此功能（默认值：true）。
revert：在 drop 操作失败时，是否应将拖动元素重置为初始位置（默认值：false）。

var elem = document.getElementById('myDraggableElement');
var dd = new ddragdrop.DragDrop(elem, {
    mouseTrigger: 0, // default 0
    ghosting: false, // default true
    revert: true // default false
});

拖拽结束后，你可以使用以下代码，禁用拖拽：

dd.disable();

4. 结论

d-dragdrop 能够轻松地实现前端页面元素拖拽的功能，而不用自己动手写轮子。在开发中，主要通过设置一些选项和事件来定制拖拽行为，而且使用也不难。希望对你有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005518c81e8991b448cee15