介绍
Angular 2 是一个非常流行的前端框架，广泛应用于 Web 开发中。my-angular2-draggable 是一款为 Angular 2 所开发的 npm 包，旨在提供一个可拖拽的 DOM 元素组件，使 Web 开发更加快速、灵活和方便。
本文将介绍如何在 Angular 2 应用中使用 my-angular2-draggable，包括安装、导入、使用和示例代码。
安装
my-angular2-draggable 的安装需要使用 npm 包管理器，可在应用根目录下的命令行终端中运行以下命令进行安装：
npm install my-angular2-draggable --save
导入
在 Angular 2 应用中使用 my-angular2-draggable 需要先导入 DragElementService，同时在 Component 中声明依赖注入（Dependency Injection）：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ------------------ - ---- ------------------------ ------------ --------- ----------- ------------ ----------------------- ---------- ------------------------ ---------- - ------------------ - -- ------ ----- ------------ - -- --- -
使用
使用 my-angular2-draggable 前需要先在 DOM 中将元素声明为“可拖拽”的，通过在 HTML 模板中添加自定义属性 draggable 来实现：
<div draggable> 拖拽我！ </div>
然后在对应的 Component 中获取 DragElementService 并对元素进行注册：
-- -------------------- ---- -------
------ - ---------- ----------- --------- - ---- ----------------
------ - ------------------ - ---- ------------------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
---------- - ------------------ -
--
------ ----- ------------ -
-------------------- ------- -----------
------------------- ------------------- ------------------- --
------------------ ---- -
-----------------------------------------------------------------------
-
-通过 ElementRef 和 ViewChild 获取 HTML 元素，然后在 ngAfterViewInit 生命周期钩子函数中调用 registerDragElement 方法进行注册。此时已经可以在页面中拖拽该元素。
示例代码
在 HTML 模板中添加自定义属性 draggable：
<div #dragMe draggable> 拖拽我！ </div>
在对应的 Component 中获取 DragElementService 并对元素进行注册：
-- -------------------- ---- -------
------ - ---------- ----------- --------- - ---- ----------------
------ - ------------------ - ---- ------------------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
---------- - ------------------ -
--
------ ----- ------------ -
-------------------- ------- -----------
------------------- ------------------- ------------------- --
------------------ ---- -
-----------------------------------------------------------------------
-
-总结
my-angular2-draggable 是一个非常好用的 Angular 2 npm 包，可以为前端 Web 开发提供更加方便、快速和灵活的拖拽功能。本文介绍了如何进行安装、导入、使用和示例代码，希望可以对你在使用 my-angular2-draggable 进行开发时有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5851ab1864dac66de3