简介
@edcarroll/ng2-dnd 是一个基于 Angular 2/4 的拖放库,提供了快速构建可拖放控件的解决方案。
安装
要使用 @edcarroll/ng2-dnd 包,你需要将其导入到你的项目中:
--- ------- ------------------ ------
使用
在项目中使用 @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