随着 Web 应用程序体验的要求越来越高，拖拽功能已经成为了现代 Web 应用程序中所必须的一部分。而 @withinpixels/ngx-dnd 就是一款基于 Angular 的拖拽组件，它可以方便地实现拖拽功能。本篇教程将介绍如何使用 @withinpixels/ngx-dnd 实现前端拖拽功能。
安装
安装 @withinpixels/ngx-dnd 相关的依赖：
$ npm install @withinpixels/ngx-dnd
使用
Step 1： 引入 NgxDnDModule
在需要使用 @withinpixels/ngx-dnd 的组件中引入 NgxDnDModule：
-- -------------------- ---- -------
------ - ------------ - ---- ------------------------
-----------
-------- -
---
------------
--
---
--
------ ----- -------- - -Step 2： 使用 dnd-draggable 组件
在需要实现拖拽功能的元素中使用 dnd-draggable 组件：
<div dnd-draggable [dragData]="myData">Drag me!</div>
dragData 属性可以设置元素拖拽的数据。
Step 3： 使用 dnd-droppable 组件
在需要接受拖拽元素的元素中使用 dnd-droppable 组件：
<div dnd-droppable (onDropSuccess)="onDropSuccess($event)">Drop zone</div>
当拖拽元素被放到 dnd-droppable 组件中时，onDropSuccess 事件将被触发。
Step 4： 实现拖拽功能
在需要实现拖拽功能的组件中进行操作。下面是一个实现简单拖拽功能的示例代码：
-- -------------------- ---- ------- ---- ------------- ------------------- -------------------- ----------------------- - ---- --- ------ ---- ------------- --------------------------------------- ----------------------- - ---- ---- ------
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- ------------------------
------------
--------- ------------------
--------- -
---- --------------------------
----
----------------
----------- ---- -- ------
-------------
-----------------
--------------------
---------------------
-
-- ---- --
------
------
---- ---------------- ------------- ----------------------------------------
-- ------------- --
---- ----------- ---- -- ---------------- ---- --------
------
--
---------- --------------------------------
--
------ ----- ------------------- -
----- - ------ --- ----- --- ----- --- ----- ----
------------- -------- - ---
------------- - ----- -------
-------------------- --------------------- ---- -
------------------ - -----------
-----------------------------------
--------------------------- ------------
-
------- ---------------- ------- ----- ---------- ---- -
----- ----- - ----------------------- -- ---- --- ----------
-- ------ - --- -
------------------ ---
-
-
-在上面的示例代码中，我们使用 dnd-draggable 组件让元素可拖拽，使用 dnd-droppable 组件让元素可作为拖拽的目标。拖拽元素将传递数据给 dnd-droppable 组件中的 onDropSuccess 事件，我们在这里可以进行相应的处理操作。
以上就是使用 @withinpixels/ngx-dnd 实现前端拖拽功能的全部步骤和示例代码。通过学习本文，你可以方便地实现前端拖拽功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668181e8991b448e29f4