介绍
ng2-drop-enterprise 是一个基于 Angular 2 的 npm 包，用于在网页中添加可拖放组件的功能。这个包支持多种效果，如阴影，磁贴式布局，以及从光标位置开始的元素拖动。
在本篇文章中，我们将会详细学习 ng2-drop-enterprise 的如何使用以及如何将其集成到你的 Angular 2 应用程序中。我们将主要关注该包的基础使用和如何在项目中集成它。
安装 ng2-drop-enterprise
首先，我们需要通过 NPM 命令来安装 ng2-drop-enterprise。在终端中输入：
npm install --save ng2-drop-enterprise
ng2-drop-enterprise 的基本使用
要使用 ng2-drop-enterprise，我们需要在 Angular 2 项目中导入相应的模块。打开你的 Angular 2 应用代码，然后在 app.module.ts 文件中添加以下代码：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ----------- - ---- -----------------
------ - ------------ - ---- ------------------
------ - ----------------- - ---- ----------------
-----------
------------- -
------------
--
-------- -
--------------
------------
---------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -现在，ng2-drop-enterprise 模块已经被导入到你的应用程序中。
以下是使用 ng2-drop-enterprise 的基本示例。我们创建了两个盒子，其中一个可以拖动到另一个盒子中。当我们将一个盒子沿 Y 轴拖动到另一个盒子中时，它将触发 drop 监听器函数。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---- -------------------------
----
-----------------
------------- ----- ------ ----- ----- ---- ---- --
---------------------
---------------------------------
-
---- ---
------
----
-----------------
----------------------------
-----------------------
---------------------
-
---- -----
------
------
--
------- -
-
----------------- -
-------- -----
---------------- -------
------------ -------
------- ------
-
---------- -
------ ------
------- ------
------- --- ----- -----
----------------- -----
------ ------
------- -----
-
---------- -
------ ------
------- ------
------- --- ----- -----
----------------- ----
------ ------
-------- -----
---------------- -------
------------ -------
-
--------- -
----------------- ------
-
--
--
--
------ ----- ------------ -
---------------- ---- -
----------------- --------- -------
-
----------- ---- -
------------------- -------
-
-上述代码将创建两个 div 元素，其中一个拖动，另一个作为拖动目标。当你拖动一个 div 元素时，会触发 dragStart 函数。当你在另一个 div 上释放拖动元素时，它将触发 drop 函数。
进阶使用
如果你想更进一步地使用 ng2-drop-enterprise，你可以使用它的高级特性，如限制拖动区域以及在拖动时更改样式。以下是一个高级示例。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---- -------------------------
----
-----------------
------------- ----- ------ ----- ----- ---- ---- --
---------------------
-------------------------------------
-------------------------------------
---------------------------------
-
---- -- ------ --- ----
------
----
------------------------
----------------------------
-----------------------
---------------------
-
----
-----------------------
----------------------------
--------------------------------------------
---------------------------------
-------------------------------
---------------------------------
----------------------------
---------------------
-------
------
------
--
------- -
-
----------------- -
-------- -----
---------------- -------
------------ -------
------- ------
-
---------- -
------ ------
------- ------
------- --- ----- -----
----------------- -----
------ ------
------- -----
-
-------------------------- -
---------- -----------
------- --- ----- ------
----------- ---- --- ---- --- ------- -- -- -----
----------------- -------
-
------------------------- -
----------------- -------
-
----------------- -
------ ------
------- ------
------- --- ----- -----
----------------- ----
------ ------
-------- -----
---------------- -------
------------ -------
-
---------------- -
------ ------
------- ------
------------ -----
------- --- ----- ------
----------------- ------
-------- -----
---------------- -------
------------ -------
-
--------------------------------------- -
----------------- -------
-
--------- -
----------------- -----
-
--
--
--
------ ----- ------------ -
---------------- ---- -
----------------- ------- ------ -------- -------
-
---------------- ---- -
----------------- ------- --- --------
-
--------------- ---- -
----------------- ---- --- --------
-
---------------- ---- -
----------------- ---- --- --------
-
---------------- ---- -
------------------ ------ -------
-
----------- ---- -
------------------- ------ -------
-
-上述代码是一个高级使用示例，其中包含了拖动时更改样式以及限制拖动区域的代码。你可以在使用 ng2-drop-enterprise 过程中根据你的需要使用这些特性。
结论
ng2-drop-enterprise 是一个功能强大的 npm 包，用于添加可拖放组件的功能到您的 Angular 2 应用程序中。在本文中，我们深入学习了如何使用它，并通过示例展示了它的基本和高级用法。我们希望这篇文章能够帮助你更好地理解如何使用 ng2-drop-enterprise。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056be981e8991b448e5a61