在前端开发中，拖拽是一个很常见也很实用的功能。而 ng2-dnd-kokatsuna 是一个帮助我们实现拖拽的 npm 包，它适用于 Angular 2+ 版本。
本文将为大家介绍 ng2-dnd-kokatsuna 的详细使用教程，包括引入和安装、指令的使用、事件的使用以及示例代码等。
引入和安装
在使用 ng2-dnd-kokatsuna 之前，需要先将它引入到项目中。可以通过 npm 包管理器来实现引入和安装。
在命令行中运行下面的命令：
npm install ng2-dnd-kokatsuna --save
这个命令会下载所需的 npm 包并将它们添加到你的项目的依赖中。
指令的使用
ng2-dnd-kokatsuna 提供了一个 draggable 指令和一个 droppable 指令。分别用于实现拖拽和释放操作。
draggable 指令
draggable 指令可用于实现元素的拖拽行为。
<div draggable dragScope="example-scope" [dragData]="exampleData"> ... </div>
draggable 指令的属性包括：
dragScope：一个字符串，用于限制某些拖动的范围dragData：一个对象，它将作为拖动操作时传递给droppable指令的数据
droppable 指令
droppable 指令可用于实现元素释放行为。
<div droppable dropScope="example-scope" (onDrop)="onDropHandler($event)"> ... </div>
droppable 指令的属性和事件包括：
dropScope：一个字符串，它限定了接受拖动的draggable范围onDrop：一个处理函数，它在释放时触发，并且传递了(dragData: any)数据
事件的使用
ng2-dnd-kokatsuna 通过自定义事件来处理拖放行为。这些事件包括：
onDragStart：在拖动开始时触发onDragEnd：在拖动结束时触发onDragEnter：在拖动移入时触发onDragOver：在拖动移动时触发onDragLeave：在拖动移出时触发onDrop：在释放时触发
下面是使用过程中两个事件的示例代码：
<div draggable (onDragStart)="onDragStartHandler($event)"> ... </div> <div droppable (onDrop)="onDropHandler($event)" (onDragEnter)="onDragEnterHandler($event)"> ... </div>
示例代码
在下面的代码中，我们将创建两个 div，一个用于拖拽，另一个用于释放。当释放时，会将从拖拽元素中得到的数据显示在释放元素中。
-- -------------------- ---- -------
---- -------------------------- ---
---- ------------------
----
--------------------
---------
------------- -------- ------ ------- --
-------------------------------------
---- ---
------
----
--------------------
---------
---------------------------------
---- -----
------
---- ------------------ ------- --------
------在 .ts 文件中通过 @ViewChild 获取需要操作的元素，并且编写相关的回调函数，实际的实现效果也很简短。
-- -------------------- ---- -------
------ - ---------- ---------- ---------- - ---- ----------------
------ - --------- - ---- --------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
--------------------- - ------- ---- -- ----------- -----------
------- - ---
------------- --
---
- ----------
--
-------------------- -
---------------------------
-
---
- --------
--
-------------------- ---------- -
--------------------- ----------------
----- ------- - ---------------------- -- ---
------------ - ---- -------- ------------
-
-总结
ng2-dnd-kokatsuna 提供了一种简单并且易于使用的实现拖拽功能的方式。在本文中，我们详细介绍了 ng2-dnd-kokatsuna 的使用方法，包括指令和事件的使用，同时我们也提供了示例代码加深理解。
在实际的开发中，我们可以根据自己的需求进行定制，以满足项目的特定需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c1681e8991b448d9b72