在前端开发中，拖拽功能是常常需要实现的一个特性。vi-ng2-dnd 是一个使用 Angular2 开发的拖拽组件库，可以帮助我们更方便地实现拖拽功能。
在这篇文章中，我们将介绍 vi-ng2-dnd 的使用方法，并附带详细的示例代码和解析，希望能为大家提供一些帮助。
安装
首先，我们需要在项目中安装 vi-ng2-dnd 包。在命令行中输入以下命令：
npm install vi-ng2-dnd
这样，我们就成功安装了这个包。
使用
接下来，我们需要在项目中引入这个包。在我们需要使用拖拽功能的组件中，添加以下几行代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - --------- - ---- -------------
-----------
-------- -
-------------
-------------------
--
------------- --- --- ---
--
------ ----- -------- --这里我们使用了 Angular2 中的 NgModule 类，引入了 CommonModule 和 DndModule 模块，并注册了 MyModule 这个组件。
接下来，我们需要在 HTML 模板中加入拖拽组件的标签。vi-ng2-dnd 提供了一些预定义的标签，我们只需要根据需要选择使用即可。
<div dnd-draggable [dragData]="myObject">Drag me!</div> <div dnd-droppable (onDropSuccess)="handleDrop($event)">Drop me here!</div>
在这个例子中，我们使用了 dnd-draggable 和 dnd-droppable 两个预定义标签。其中，dnd-draggable 表示这个标签是可拖拽的，而 dnd-droppable 则表示这个标签可以接收放置的拖拽数据。
另外，我们还使用了一个叫做 dragData 的属性，用于指定这个标签所代表的数据。当这个标签被拖拽时，这个数据会被传递给拖拽目标。
同时，我们在 dnd-droppable 标签上添加了一个 onDropSuccess 事件，用于响应拖拽目标放置成功的情况。在 handleDrop 函数中，我们可以处理拖拽目标放置成功后的逻辑。
示例代码
为了更好地演示 vi-ng2-dnd 的使用方法，我们这里提供一个完整的示例代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - --------- - ---- -------------
------ - ------------ - ---- ------------------
-----------
-------- -
--------------
-------------------
--
------------- -
------------
--
---------- - ------------ -
--
------ ----- --------- - -<div dnd-draggable [dragData]="{ message: 'Hello, world!' }">Drag me!</div>
<div dnd-droppable (onDropSuccess)="handleDrop($event)">Drop me here!</div>-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ---------
--------- -
-----
------------------
---- ------------- ------------- -------- ------- ------- ------- ---------
---- ------------- ----------------------------------------- -- -----------
----------------------
------
-
--
------ ----- ------------ -
------ ----- - ----------- ---------
------ ------- - ---
------ ----------------- -
------------ - -----------------------------------------
-
-在这个示例中，我们创建了一个简单的 Angular2 应用。在模板中，我们创建了一个可拖拽的 div 标签，同时创建了一个可以接收放置的 div 标签。
在 AppComponent 中，我们定义了一个叫做 message 的属性，用于储存放置成功后的数据。在 handleDrop 函数中，我们将放置成功后的数据保存到 message 变量中，并在模板中显示出来。
结论
vi-ng2-dnd 是一个十分便利的 Angular2 拖拽组件库。它提供了许多预定义标签和事件，可以帮助我们更加方便地实现拖拽功能。同时，由于它是一个 npm 包，所以可以方便地被多个项目共享和引用。
在实际使用中，我们可以根据需要调整标签属性和事件函数，来实现不同的拖拽效果和业务逻辑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a8c81e8991b448d80c5