背景介绍
前端开发趋势迅猛发展，随着业务需求的不断增加，我们的前端工程师需要更好的工具来支持其开发工作。包管理器 npm 就是这样一个强大的工具，它让前端工程师轻松地使用各种优秀的工具包。在众多的 npm 包中，ngx-dnd-jmcd 是一个帮助我们实现拖放交互效果的包。它设计的非常灵活，可以帮助我们实现多种不同场景的拖放效果。下面是本文将详细介绍该 npm 包的使用教程。
ngx-dnd-jmcd 简介
ngx-dnd-jmcd 是一个可以轻松创建拖放区域和拖动对象的 Angular 库。它是建立在 dnd-core 之上的，并且具有许多组件，指令和支持任何 HTML ELEMENT 的拖放操作。
安装 ngx-dnd-jmcd
您可以通过以下命令在您的项目中安装 ngx-dnd-jmcd：
npm i ngx-dnd-jmcd --save
需要注意的是，在安装之前，确保您已经安装了 Angular CLI。如果您还没有安装，请参阅在官方的安装指南。
使用 ngx-dnd-jmcd
接下来，我们将详细介绍如何使用 ngx-dnd-jmcd 包。
导入组件
在您的 Angular 项目中，您需要导入并在应用程序中注册 DragDropModule 规范，以使用 ngx-dnd-jmcd。
首先在您的 angular.json 文件中添加以下样式引入：
"styles": [
"node_modules/ngx-dnd-jmcd/dist/style.css",
"src/styles.scss"
],接下来，在 app.module.ts 文件中引用并注册 DragDropModule 组件
-- -------------------- ---- -------
------ - -------------- - ---- ---------------
-----------
------------- -
-------------
-- ---
--
-------- -
--------------
-----------------
--------------- -- ------ ----
--
---------- ---
---------- --------------
--
------ ----- --------- - -创建拖动元素
接下来我们假设您需要从列表中拖动一项到另一个区域。要实现这个场景，您可以通过 Angular 设计一个组件，让它具有拖放功能。
-- -------------------- ---- -------
---- ----------------------------
----
------------------
----------------------
--------------------
-----------------------
-------------------------------------
---------------------------------
----------------
-
----
-----------------------
----------- ---- -- ------ --- - - ------
-----------------
-
-- - -- -- --------- -- -- ---------------- --
------
------
---- ---------------- ----------------------- ------------------------------
---- ---- ---- ---- ----- -- ---- ---------
------
------在该示例代码中，我们在外层 div 上指定了 item 的区域。在内部的 div 中，我们使用 *ngFor 循环渲染 items 列表。dongDropModule 的所有指令如示例中演示。
相关指令
ngx-dnd-jmcd 提供了多种指令，帮助您实现拖放效果。
ngx-dnd-list
应用于要排序的元素之一的 DOM 结果，此指令可将元素标记为可排序。它的值取决于项排序集合。你可以使用列表内部的任何属性来控制元素如何移动。此指令也可应用于条目容器的任何祖先上。
dragEnabled
添加到一个排序元素上的属性，表示该元素是否可被拖拽。当拖拽 disabled 设为 true 时，该元素无法被拖拽。默认值为 false。
ngx-dnd-sortable
可用于对项目进行排序。
[dragData]
排序列表中的数据绑定，可以用来指定拖动时传递的数据。
ngx-dnd-jmcd 示例
最后，我们提供了一个 ngx-dnd-jmcd 的完整示例代码，供大家参考。
-- -------------------- ---- -------
---- ------------------ ---
---- ----------------------------
----
------------------
----------------------
--------------------
-----------------------
-------------------------------------
---------------------------------
----------------
-
----
-----------------------
----------- ---- -- ------ --- - - ------
-----------------
-
-- - -- -- --------- -- -- ---------------- --
------
------
---- ---------------- ----------------------- ------------------------------
---- ---- ---- ---- ----- -- ---- ---------
------
-------- -------------------- ---- ------- -- ------------------ -- -------------------- - -------- ----- ---------------- ------------- - ---------------- - ------- ----- - --------- - -------- ----- ------- --- ------ ----- ----------- ------- ------- ------ ------ ------ ----------- ----- -
-- -------------------- ---- -------
-- ----------------
------ - --------- - ---- ----------------
------ - ------------ - ---- ---------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ -
----- - --------------------
----- - -
- --- -- ----- ----- ----- ------------ ----- -- ---- ----- --
- --- -- ----- ----- ----- ------------ ----- -- ---- ----- --
- --- -- ----- ----- ------- ------------ ----- -- ---- ------- --
- --- -- ----- ----- ------ ------------ ----- -- ---- ------ --
- --- -- ----- ----- ------ ------------ ----- -- ---- ------ -
--
-------------------- ---------- -
----------------- --------- -------
-
------------------ ---------- -
----------------- ------- -------
-
----------------- ------------- -
----------------- --------- -------
--- ----- - ------------
-- ------- ----- --- ------------ -
----- - ------------------
-
------------------------ -- ------------
-
-总结
在本文中，我们介绍了如何在 Angular 应用程序中使用 ngx-dnd-jmcd 包来实现拖动效果。我们详细介绍了如何引入和使用 ngx-dnd-jmcd，还演示了一个完整的实例示例。相信通过学习本文，您已经基本掌握了如何使用 ngx-dnd-jmcd 包来实现拖放交互效果的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c5b81e8991b448e5e33