1. 简介
mm-ng2-dnd 是一个 Angular 2 的拖放组件库，提供了一系列的指令和服务，方便开发者实现拖放功能。本文将为大家详细介绍如何使用和配置该组件库。
2. 安装和导入
使用 npm 安装 mm-ng2-dnd：
npm install --save mm-ng2-dnd
在 app.module.ts 中导入该包并添加到 import 数组中：
-- -------------------- ---- -------
------ - --------- - ---- -------------
-----------
-------- -
--------------
-------------------
--
------------- -
------------
--
---------- --------------
--
------ ----- --------- - -3. 使用指令
mm-draggable
mm-draggable 指令用于使元素可拖动。在 HTML 中添加指令：
<div mmDraggable>可拖动的元素</div>
可以通过配置属性实现对元素的控制：
- dropZones：指定元素可以被拖动到哪些目标区域。dropZones 可以是一个字符串数组，也可以是一个返回字符串数组的函数。
- dragData：传递到目标元素的数据。该值可以是任何类型。
<div
[mmDraggable]="{ dropZones: ['zone1', 'zone2'], dragData: myData }"
>
可拖动的元素
</div>mm-droppable
mm-droppable 指令用于使元素可接收拖放元素。在 HTML 中添加指令：
<div [mmDroppable]="'zone1'">接收元素的容器</div>
可以通过配置属性实现对元素的控制：
- dropZones：指定元素接收哪些类型的拖放元素。dropZones 可以是一个字符串数组，也可以是一个返回字符串数组的函数。
- onDropSuccess：接收到拖放元素后执行的回调函数。
<div
[mmDroppable]="{ dropZones: ['zone2', 'zone3'], onDropSuccess: myCallback }"
>
接收元素的容器
</div>mm-sortable
mm-sortable 指令用于使元素可进行排序。在 HTML 中添加指令：
<ul mmSortable>
<li *ngFor="let item of items">{{ item }}</li>
</ul>可以通过配置属性实现对排序的控制：
- dropZones：指定元素可排序的范围。dropZones 可以是字符串，也可以是返回字符串的函数。
- dragStart：拖动开始时执行的回调函数。
- dragEnd：拖动结束后执行的回调函数。
-- -------------------- ---- ------- --- ---------- ------------------------ ----------------------- ----------------------------- ------------------------- - --- ----------- ---- -- --------- ---- ------- -----
4. 使用服务
除了以上三个指令之外，mm-ng2-dnd 还提供了一些服务，方便实现各种场景下的拖放交互。
DragDropService
DragDropService 是一个全局的服务，用于在应用程序中共享数据和状态。可以通过 Angular 的依赖注入（DI）方式引入该服务，并调用对应的方法。
- addDragData：添加数据到当前拖动的元素中。
- getDragData：获取当前拖动元素中存储的数据。
- removeDragData：从当前拖动元素中删除存储的数据。
-- -------------------- ---- -------
------ - --------------- - ---- -------------
------------
--------- ----------------
------------ ----------------------
--
------ ----- ------------ -
------------------- ---------------- ---------------- --
-------------- ---- -
------------------------------------------ --------
-
------------ ---- -
----------------------------------------------
-
-DragImageService
DragImageService 用于控制拖动图像的显示样式，可以通过 Angular 的 DI 引入该服务并在拖动开始时调用 show 方法，传递一个元素和偏移量即可。
-- -------------------- ---- -------
------ - ---------------- - ---- -------------
------------
--------- ----------------
------------ ----------------------
--
------ ----- ------------ -
------------------- ----------------- ----------------- --
------------------ ----------- ---- -
--------------------------------------- -- ------------ - -- --- -- --- ---
-
-5. 示例代码
完整的使用示例代码：（假设项目中已经引入了 Bootstrap 样式库）
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- ---------------- - ---- -------------
------------
--------- ----------------
------------ ----------------------
--
------ ----- ------------ -
------ ---------
--------- -------
------------
------- ---------------- ----------------
------- ----------------- ----------------
- -
---------- - ------ --- ----- --- ----- --- ----- --- ----- ----
-
------------------ ----------- ---- -
---------------------------------------- ---------------
--------------------------------------- -- ------------ - -- --- -- --- ---
-
------------ ---- -
--------------------------------------------
-
---------------- ---- -
-- ---------------
-
---------------- ---- -
-- ---------------
-
--- -------------------- ---- -------
---- ------------
---- -----------------
--------------
--- -------------------
---
----------- ---- -- ------
-----------------------
---------------- --------- ---- --
-------------------------
----------------------- - ----- --------------------
-------------------------
-
-- ---- --
-----
-----
------
---- -----------------
--------------
--- ------------------
---------------
---------- ---------
---------- --------------
-------- ---------------
--
------------------------
-------------------------
-
---
----------- ---- -- ------
-----------------------
--- ---- -------
-----
------------------
----
------------ --------------
----------------------
------------------------
-----------------------------------
-
----
------------------
-------------------------------------------
-
-- ----------------------------------- --
------
----
--------------------
--------------------------------------------
-
-------
------
------
------
------6. 总结
mm-ng2-dnd 是一个非常方便实用的拖放组件库，通过使用该库，我们可以轻松实现拖放、排序等不同的交互场景。本文中我们详细介绍了如何使用指令和服务来配置和控制该组件库，希望可以对前端开发者们有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005520781e8991b448cf8be