导语
obosha-ng2-dnd 是一个基于 Angular 2 开发的拖拽组件库，可以帮助前端工程师快速实现拖拽功能。在日常开发中，实现拖拽常常会耗费大量时间，而借助 obosha-ng2-dnd 可以大幅简化这个过程，提高开发效率。
本篇文章旨在介绍 obosha-ng2-dnd 的安装、使用、案例等相关内容，以帮助前端工程师更好地使用该组件库。
安装
安装 obosha-ng2-dnd 非常简单，只需要打开终端，运行以下命令即可：
npm install obosha-ng2-dnd --save
使用
导入模块
在开始使用 obosha-ng2-dnd 之前，需要先导入 DndModule 模块。
-- -------------------- ---- -------
------ - --------- - ---- -----------------
-----------
-------- -
-- ---
--------------------
-- ---
--
--
------ ----- --------- - -编写 HTML
在 HTML 中需要使用 dnd-draggable 和 dnd-droppable 属性来实现拖拽。
<div dnd-draggable [dragData]="item">拖拽区域</div> <div dnd-droppable (onDropSuccess)="dropSuccess($event)">放置区域</div>
编写组件
在组件中需要定义一些方法，来处理拖拽的事件。这里提供一个简单的例子供参考：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ------------------
------------ -------------------------------
------- ---
--
------ ----- ------------------- -
---- - - ----- ------ --
------------------ ---- -
----------------- --------- -------
-
-完整示例
<!-- dnd-example.component.html --> <div dnd-draggable [dragData]="item">拖拽区域</div> <div dnd-droppable (onDropSuccess)="dropSuccess($event)">放置区域</div>
-- -------------------- ---- -------
-- ------------------------
------ - --------- - ---- ----------------
------------
--------- ------------------
------------ -------------------------------
------- ---
--
------ ----- ------------------- -
---- - - ----- ------ --
------------------ ---- -
----------------- --------- -------
-
-进阶
限制拖拽区域
-- -------------------- ---- ------- ---- ------------- ----------------- ----------------------------------- ----------------------------------- - -------- - ------- - ---- ------ ---- ------------- ------------------------------------------------
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ------------------
------------ -------------------------------
------- ---
--
------ ----- ------------------- -
--------- - ------
---- - - ----- ------ --
------------------ ---- -
----------------- --------- -------
-
-自定义拖拽元素
-- -------------------- ---- ------- ---- ----------- ---- -- ----- ------------- ----------------- ----------------------------- - -- --------- -- ------ ---- ------------- ------------------------------------------------ ------------ ---------------- -------------------- ---- --------------------- --------- -------- --------------
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ------------------
------------ -------------------------------
------- ---
--
------ ----- ------------------- -
---- - -
- ----- ------- --
- ----- ------- --
- ----- ------- --
--
------------------ ---- -
----------------- --------- -------
-
-结语
obosha-ng2-dnd 是一个功能强大的拖拽组件库，可以帮助前端工程师快速实现拖拽功能。本篇文章介绍了 obosha-ng2-dnd 的安装、使用和案例，希望能够对广大前端工程师有所帮助。
完整的示例代码可以在 GitHub 上获取。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005553581e8991b448d266f