前言
在开发前端页面时，拖放（drag and drop）元素是一个常见需求。ng2-drag-drop 是一个 Angular 2+ 的拖放库，可以帮助我们快速实现这一功能。本文将介绍如何使用 ng2-drag-drop。
安装
我们可以通过 npm 来安装 ng2-drag-drop：
npm install ng2-drag-drop --save
使用
在 Angular 的模块中引入 NgDragDropModule：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ---------------- - ---- ---------------- ----------- -------- --------------- ---------------------------- ------------- --------------- ---------- -------------- -- ------ ----- --------- - -
在模板文件中使用 ng2-drag-drop：
-- -------------------- ---- -------
---- ------------
---- -----------------
---- ------------ -------------- ------------
---- ----------------------
--- ----------------------------- ----------
------
---- -------------------
------- ----- --- -- -----------
------
------
------
---- -----------------
---- ------------ -------------- ----------- ------------------------------
---- ----------------------
--- ----------------------------- ----------
------
---- -------------------
------- ----- --- ------ ---------
------
------
------
------在组件的代码中定义 onItemDrop 方法：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- - ---- ----------------
------------
--------- ------
------------ --------------------
--
------ ----- ------------ -
----------------- ---------- -
-- ------
-
-API
ng2-drag-drop 提供了一些指令和事件，可以让我们实现更加复杂的拖放功能。
指令
- ngDraggable：可以将元素设置为可拖动。例如：
<div ngDraggable>Drag Me!</div>。 - ngDroppable：可以将元素设置为可接受拖入的元素。例如：
<div ngDroppable (onDrop)="onItemDrop($event)">Drop Here!</div>。 - ngSortable：可以将元素设置为可排序的。例如：
<ul ngSortable [(ngModel)]="items"></ul>。
事件
在 ngDroppable 中，我们可以使用以下事件：
- onDragEnter：当一个可拖动的元素进入一个可拖放的元素时触发。
- onDragOver：当一个可拖动的元素在一个可拖放的元素上移动时触发。
- onDragLeave：当一个可拖动的元素离开一个可拖放的元素时触发。
- onDrop：当一个可拖动的元素被放在一个可拖放的元素中时触发。
在 ngSortable 中，我们可以使用以下事件：
- onSort：当元素排序发生变化时触发。
示例代码
以下示例代码演示了如何使用 ng2-drag-drop，实现了一个简单的拖放功能：CodeSandbox
总结
ng2-drag-drop 提供了一组指令和事件，让我们可以轻松地实现拖放功能。通过本文的介绍，相信大家已经了解了如何使用这个库。希望大家通过学习 ng2-drag-drop，能够更加高效地开发前端页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/62029