简介
@edcarroll/ng2-dnd 是一个基于 Angular 2/4 的拖放库，提供了快速构建可拖放控件的解决方案。
安装
要使用 @edcarroll/ng2-dnd 包，你需要将其导入到你的项目中：
npm install @edcarroll/ng2-dnd --save
使用
在项目中使用 @edcarroll/ng2-dnd 的第一步是导入它。要做到这一点，只需在你的模块中引入它，并将其添加到指令或组件的元数据中。
下面的示例展示了如何在你的组件中使用 @edcarroll/ng2-dnd ：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- ----------- ---------- - ---- ---------------------
------------
--------- ---------
--------- -
---- ----------------
---- ------------------------- ---------------------------- ---------
---- ------------------------------ -----------
------
-
--
------ ----- ------------ -
----------- ------ - ------ -------
------------------- ----------- ----------- --
----------- ------------------ - -
---------- ------- ---------- -- -
----------------- -----------
---------------------------------------------- ---------------
-
-
----------- ---------- - -
-------------- ------- ---------- -- -
----------------- --------------
-
-
- 上述代码中，我们首先引入了 DndService 以及 DragSource 和 DropTarget 接口。 DragSource 和 DropTarget 接口都是 @edcarroll/ng2-dnd 包提供的。它们允许我们指定拖放操作的行为。在本例中，我们定义了一个 dragSource 和 dropTarget，然后将它们附加到组件中。
当用户拖动“Drag me!”元素到“Drop here!”元素上时，我们会看到该元素成功地被释放。
指导意义
@edcarroll/ng2-dnd 是一个非常强大的拖放库，可以让你非常轻松地构建可拖动控件。该库不仅提供了很多灵活且易于使用的功能，而且还有一个强大的社区，可以帮助你解决任何问题。此外，@edcarroll/ng2-dnd 还提供了许多例子，并强调了如何实现拖动和投放等基本操作。
结论
@edcarroll/ng2-dnd 是一个非常出色的拖放库，对于想要在他们的 Angular 2/4 应用程序中添加拖放功能的开发人员来说，是一个必不可少的工具。它易于使用，具有丰富的功能，并在社区中发挥着重要的作用，因此你应该考虑将其添加到你的开发工具包中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055dae81e8991b448db6ef