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