@wandererin/ngx-dnd 是一款前端的 drag-and-drop 库，可以使拖放元素变得更加简单和流畅。它由 TypeScript 编写，依赖于 Angular 平台。若你正在寻找一种快速而简单的方法来增强你的应用程序的交互性，请继续阅读。
安装
为了安装 @wandererin/ngx-dnd，你需要运行以下命令：
--- ------- ------------------- ------
使用
关于 @wandererin/ngx-dnd 的最基本的用法是将它导入到你的 Angular 组件中。确保在需要使用的组件中导入 NgxDnDModule：
------ ---------- ---- ---------------- ------ -------------- ---- ---------------------- ----------- -------- --------------- --- -- ------ ----- -------- --
基本使用
@wandererin/ngx-dnd 的基本使用是使用指令进行拖动和放置元素。要使用这个库，你需要将 ngxDnD 指令添加到 HTML 元素中。
HTML：
---- -------
------------
---- ----------------- --
------组件：
------------
---
--
------ ----- ----------- -
------------- ----------------- -
-- -----------
-
-在组件中，你可以处理每个指令提供的事件。这些事件将告诉你元素何时被拖动，何时被释放以及拖动的数据。在上面的示例中，我们添加了一个 onDrop 函数，该函数将在拖动结束时被调用。
自定义拖动数据
ngxDnD 指令提供了一种简单的方式来自定义拖动数据。默认情况下，拖动数据是元素自身的 HTML 内容。要使用自己的数据传递，请将 ngxDnD 指令的 dragData 属性设置为你的自定义数据。
---- ------ ------------- ----- ----- ---- -- ---
------------
---- ----------------- --
------其他指令
除了 ngxDnD 指令，**@wandererin/ngx-dnd** 还提供了其他指令，可以帮助你更轻松地控制拖动元素。
ngxDnDHandle
ngxDnDHandle 指令允许你指定元素的一个区域，该区域将被用作拖动控制区域。
---- -------
---- ---------------------------
------------
---- ----------------- --
------ngxDnDPlaceholder
ngxDnDPlaceholder 指令表示放置时占位符的 HTML。
---- -------
---- --------------------------------
------------
---- ----------------- --
------API
@wandererin/ngx-dnd 还提供了一些 API 方法，可以帮助你更好地控制拖放操作。
dragStart()
dragStart() 方法将手动启动拖放操作。
------------
---
--
------ ----- ----------- -
----------- -
----- ---- - - ----- ----- ---- -- --
-- -----------
------------------------------------------------------ ------
-
-dragEnd()
dragEnd() 方法将手动结束拖放操作。
------------
---
--
------ ----- ----------- -
--------- -
-----------------
-
-示例代码
下面是一个完整的示例代码，演示如何使用 @wandererin/ngx-dnd 进行拖放操作。
HTML：
---- ------------------
---- -------------- ------ ------------- ----- ----- ---- -- ---
-------------
---- ---------------------------
----
----------------------------------------
----------------------------------------
-----
------
---- -------------------
------
----------------------------
--------------------------
-------------
------------------
------
------组件：
------ - --------- - ---- ----------------
------ - -- ------ ---- ----------------------
------------
---
--
------ ----- ----------- -
------- - --------------
------------- ----------------- -
------------ - -------- -------------------------------------------- ---
-
-CSS：
---------- - -------- ----- ---------------- ------------- ------- ------ ------ ------ ------- - ----- - ------- - -------- ----- ----------------- -------- ------- ----- ------------ ----- ---------- ------ - ------- - -- - ---------------- ----- ------------- -- - ------- -- ---- - ------------- ----- ------------ ----- - ------------ - -------- ----- ----------------- ------------ ------- ------ --- -------- ------- -------- ------------ ----- ---------- ------ - --------------------- - ----------------- --------- ---- ---- ----- -
本文介绍了如何使用 @wandererin/ngx-dnd 实现拖放元素。这个教程提供了基本的概述和使用示例，同时深入讲解了指令、API以及事件的具体实现。希望本文能够帮助到正在寻找优秀拖放库的开发者。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056caa81e8991b448e615c