ng2-dnd 是一个基于 Angular 2+ 的 Drag and Drop 组件库，可用于实现拖拽，拖放和排序等功能。在本文中，我们将详细介绍如何使用 ng2-dnd 实现拖拽和拖放功能。
安装和配置
首先，我们需要使用 npm 安装 ng2-dnd。进入项目目录，并执行以下命令：
npm install ng2-dnd --save
接下来，我们需要将 DndModule 导入到 Angular 应用程序的模块中。在 app.module.ts 文件中添加以下内容：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - --------- - ---- ---------- ------ - ------------ - ---- ------------------ ----------- -------- - -------------- ------------------- -- ------------- - ------------ -- ---------- - ------------ - -- ------ ----- --------- - -展开代码
这样就配置好了 ng2-dnd 库的安装和使用。
基本用法
接下来我们来看一下如何实现一个基本的拖拽和拖放功能。
在组件的 HTML 文件中，添加以下代码：
<div class="container"> <div class="card" dnd-draggable [dragData]="data">Drag me!</div> <div class="dropzone" dnd-droppable (onDropSuccess)="onDropSuccess($event)">Drop here!</div> </div>
在组件的 TypeScript 文件中，添加以下代码：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ----------- --------- - ---- ------------------ ---- ------------ ------------- ---------------------- --------- ---- ---------------- ------------- -------------------------------------------- ----------- ------ -- ------- -- ---------- - -------- ----- - ----- - ------ ------ ------- ------ ------------- ----- ----------------- ----- ------ ----- ----------- ------- ------------ ------ ------- ----- - --------- - ------ ------ ------- ------ ----------------- ----- ----------- ------- ------------ ------ - -- -- ------ ----- ------------ - ---- - - --- -- ----- ----- -- -- -------------------- ---- - ---------------------- ------- - -展开代码
在这个示例中，我们定义了一个可以被拖拽的卡片和一个可以接收拖拽卡片的区域，当我们将卡片拖入区域时，就会触发 onDropSuccess 方法，并在控制台中输出 dropped 事件。
拖拽和排序
ng2-dnd 还支持拖拽和排序功能。我们可以使用指令 dnd-sortable 来实现。
在组件的 HTML 文件中，添加以下代码：
<ul class="list" dnd-sortable-container [sortableData]="dataList"> <li class="list-item" *ngFor="let item of dataList" dnd-sortable [sortableIndex]="item.order"> {{ item.name }} </li> </ul>
在组件的 TypeScript 文件中，添加以下代码：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ----------- --------- - --- ------------ ---------------------- -------------------------- --- ----------------- ----------- ---- -- --------- ------------ ----------------------------- -- --------- -- ----- ----- ------- ------------------- ------------- -- ------- -- ----- - ---------------- ----- -------- -- ------- -- - ---------- - -------- ------ -------- ----- -------------- ----- ----------------- ----- - -- -- ------ ----- ------------ - -------- - - - ----- ----- --- ------ - -- - ----- ----- --- ------ - -- - ----- ----- --- ------ - -- - ----- ----- --- ------ - -- - ----- ----- --- ------ - - -- ----- - ----- ------- - - ----- ----- ---------------------- - ---- ------ -------------------- - - -- ---------------------------- - -展开代码
在这个示例中，我们定义了一个可以被拖拽和排序的列表，当我们拖拽列表项重新排序时，就会更新 dataList 中的顺序。同时我们还附加了一个添加新项的按钮，方便我们手动添加新项到列表中。
总结
我们在本文中介绍了如何安装和配置 ng2-dnd，以及如何使用其组件实现拖拽和排序功能。ng2-dnd 在 Angular 2+ 中实现这些功能非常容易，使用方便灵活。我们希望这篇文章对你的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/ng2-dnd
