在前端开发中，实现拖放（drag-and-drop）的功能是相对常见的场景，特别是在处理用户交互时，可以增加更多的趣味性和易用性。drag-drop-angular2 是一个 npm 包，可以让开发者通过 Angular 2 来实现拖放功能，本篇文章将详细介绍该包的使用及示例代码，以供读者学习及参考。
安装
首先，需要安装 drag-drop-angular2 包。可以通过以下命令行进行安装：
npm install drag-drop-angular2 --save
使用
拖放元素
在 HTML 模板文件中，首先需要引入 drag-drop-angular2 模块：
<script src="../node_modules/drag-drop-angular2/bundles/drag-drop-angular2.umd.js"></script>
接着，可以使用 draggable 属性来标识页面中需要实现拖放的元素，如下所示：
<div draggable="true">我是拖放元素</div>
当用户拖动该元素时，将启动拖放过程。
容器元素
接下来，需要定义接收拖放元素的容器元素。该容器元素可以使用 droppable 属性来标识，如下所示：
<div droppable="true">我是拖放容器</div>
这时，容器元素会在元素拖入时被激活。
事件处理
在拖放过程中，有多个事件可以处理，如拖放元素的开始（start）、结束（end）等等。drag-drop-angular2 包提供了一些帮助函数，可以让开发者方便地进行事件处理。
例如，在组件类中，需要引入 DragDropService：
import { DragDropService } from 'drag-drop-angular2';在拖动开始时，可以使用 dragStart 函数进行处理：
dragStart(e: any) {
this.dragInfo = e;
console.log('拖动开始...', e);
}其中，dragInfo 变量可以保存开始拖动时的信息，如鼠标位置、被拖动元素等等。
拖动结束时，可以使用 dragEnd 函数进行处理：
dragEnd(e: any) {
console.log('拖动结束...', this.dragInfo, e);
// 可以根据 dragInfo 和 e 进行业务处理
}示例代码
最后，附上一个完整的示例代码，以便读者进行参考：
-- -------------------- ---- -------
--------- -----
------
------
------------------------- ----------
------- ----------------------------------------------------------
------- ----------------------------------------------------
------- -----------------------------------------------------------
------- -------------------------------------------------------
------- ------------------------------------------------------------------------------------
--------
---------------
--------- -
---- -
------- -----------
----------------- ----
-
-
---
--------------------------------------------- ------------------- ---
---------
-------
------
---------------------- -------
----
---- ---------------- --------------------------------------------
---- ---------------- ------------------------- ------------------------------------------
----
-----
-------------
-----------------------
------
--------
------ - --------- - ---- ----------------
------ - --------------- - ---- ---------------------
------------
--------- ---------
--------- --------------------
--
------ ----- ------------ -
--------- ----
------------------- ---------------- ---------------- - -
------------ ---- -
------------- - --
-
----------- ---- -
-------------------
-
----------- ---- -
-------------------- ---------------
------------- - -----
-
---------- -
-------------------------------------
-
-
---------
-------
-------总结
drag-drop-angular2 是一个方便实现拖放功能的 npm 包。它提供了拖放元素、容器元素及事件处理等功能，开发者可以通过简单配置即可实现拖放功能。通过本篇文章的介绍，相信读者对该包的使用已经有了初步的了解，可以在项目中应用并丰富用户交互效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005751181e8991b448ea383