简介
ng2-dragula-mouse 是 npg 社区中一个轻量级的 Angular 组件库，提供了一个简单易用的拖放解决方案。它使用了 Dragula 库，其原本用于创建可拖放容器并在它们中间移动元素，而 ng2-dragula-mouse 将其封装在 Angular 组件中，便于在 Angular 项目中使用。
安装
在使用 ng2-dragula-mouse 之前，我们需要先下载和安装 npm 并创建一个 Angular 项目。
下载和安装
首先，打开我们的终端控制台（Terminal）并输入以下命令来下载和安装 ng2-dragula-mouse：
npm install ng2-dragula-mouse --save
引用
在我们的项目中使用 ng2-dragula-mouse，我们需要在指定的模块中引用该库。这通常意味着在我们的 app.module.ts 文件中引用。
-- -------------------- ---- -------
------ - ------------------ - ---- --------------------
-----------
-------- -
-- ----
----------------------------
-
--
------ ----- --------- - -由于服务是在 Angular 中的模块中提供的，为确保它在我们的项目中正常工作，我们需要在应用程序中运行服务。这可以通过在主组件（app.component.ts）中添加以下代码来实现：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ------------------- - ---- -------------------- ------------ -- --- -- ------ ----- ------------ - ------------------- -------------------- -------------------- - - -
使用
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------- - ---- --------------------
------------
--------- --------------
--------- -
---- ----------------
---- ----------------- ---------------
---- -------------- ----------- ------ -- ---------
-- ------ --
------
------
---- ----------------- ---------------
---- -------------- ----------- ------ -- ---------
-- ------ --
------
------
------
-
--
------ ----- ---------------- -
------- - ------- ------ -------- --------
------- - ---
------------------- -------------------- -------------------- -
----------------------------------------------- -- -
-------------------------------- ----------
---
-
------- ----------------- ------- -
--- ---- ------- - -----
--------------------------- -- ----------------
-
-在示例中，我们提供了一个拖拽区域，其中包含一个名为 sources 的元素列表，他们是用于拖拽到第二个拖拽区域的 targets 元素列表的源。我们创建了两个容器，并使用 dragula 指定为 COPY，然后我们可以拖放列表元素。在实现过程中，我们必须使用 ngFor 指令来遍历元素列表并打印出来。
然后，我们要为 dragulaMouseService.dropModel 事件实现一个回调函数。在 onDropModel() 函数中，我们需要获取拖动的元素以及它们所在的源和目标容器，然后将元素添加到目标容器中。
结论
本文介绍了 ng2-dragula-mouse 库的下载、安装、引用和使用。使用 ng2-dragula-mouse 能够使前端开发人员在 Angular 项目中快速实现拖放功能，提高用户的交互体验，并加快开发速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600568e681e8991b448e4a13