简介
ng2-dnd-fixed 是一个用于 Angular 2 轻松实现拖放功能的 npm 包。与其他拖放库不同的是，它支持拖放数据的复制和移动。
安装
在 Angular 2 项目中安装 ng2-dnd-fixed，可以使用 npm 命令：
--- ------- ------------- ------
使用
要使用 ng2-dnd-fixed，需要导入 DragDropModule：
------ - -------------- - ---- ----------------
-----------
-------- -
------------------------
-
--
------ ----- --------- - -接下来，在组件中添加 dnd-draggable 或 dnd-droppable 属性来实现拖放功能。
dnd-draggable
dnd-draggable 是指拖动源。它是用来指示页面上的 HTML 元素是可拖动的。要使用 dnd-draggable，需要传入拖动源的数据，即可支持拖动。
以下是一个简单的示例：
---- ------------- ----------------- ---- -- - --------- --- ----- ------
这个示例创建一个可以拖拽的 HTML 元素，并且指定了拖动源的数据（在这里是一个名为 dog 的字符串）。
dnd-droppable
dnd-droppable 是指拖放目标。它是用来指示页面上的 HTML 元素是可接收拖动源的。要使用 dnd-droppable，需要传入一个事件回调函数，当有拖动源放置在它上面时，就会调用该函数。
以下是一个示例：
---- ------------- ---------------------------------------- ---- -- - --------- ---- ------
这个示例创建了一个可以拖放的区域，并且指定了一个 onDropSuccess 事件处理函数。当拖动源被放置在这个区域上时，ng2-dnd-fixed 就会调用 onDropSuccess 函数，把拖动源的数据传递给它。
示例代码
------ - --------- - ---- ----------------
------------
--------- ---------
--------- -
-----
-------- -- ------------------
---- -------------------
---- ------------- ---------------------
---- --------------------------------------
------
---- ------------- ---------------------
---- --------------------------------------
------
---- ------------- ---------------------
---- --------------------------------------
------
------
---- ------------------ ------------- ----------------------------------------
---- ----
------
------
--
--
------ ----- ------------ -
----- -------- - -------- ------- --------
-------------------- ---- -
---------- ------- - - ----------------
-
-这个示例创建了一个包含可拖动区域和可拖放区域的 Angular 2 组件。当你拖拽一个狗的图片到可拖放区域时，就会弹出一个窗口告诉你你拖放的数据是什么。
总结
ng2-dnd-fixed 是 Angular 2 中最简单易用的 npm 包之一。它为我们提供了一种快速实现拖放效果的方法。通过上述的使用指导，我们可以轻松了解到如何在自己的项目中使用 ng2-dnd-fixed，同时希望能够对读者有所启示和帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600672693660cf7123b36723