简介
ngx-frenetiq-dnd 是一个基于 Angular 和 RxJS 的拖放解决方案。它提供了可重复使用的拖放指令和服务，可以使用它轻松地实现任何拖放场景，无论是列表重排、拖放上传还是任何其他自定义场景。
在本文中，我们将介绍如何安装和使用 ngx-frenetiq-dnd，并详细展示该库提供的每个指令和服务的用法和实现原理。
安装
在使用 ngx-frenetiq-dnd 之前，你需要先安装 Angular CLI，然后通过 npm 安装 ngx-frenetiq-dnd。
npm install ngx-frenetiq-dnd --save
指令和服务
ngx-frenetiq-dnd 提供了两个指令：droppable 和 draggable，以及一个服务 DndService。
droppable
droppable 指令可以将一个组件或元素注册为可接受元素，接受来自 draggable 指令拖放的数据。
下面是 droppable 指令的基本用法：
<div droppable (onDrop)="onDrop($event)"> <!-- 接受拖放的元素 --> </div>
其中 (onDrop) 是指定拖放完成后要执行的回调函数。
我们也可以使用 dropWhile 选项来进一步控制 droppable 的接受条件。例如，只有当拖动元素的源始和目标匹配时才接受拖放：
<div droppable [dropWhile]="dropWhilePredicate" (onDrop)="onDrop($event)"> <!-- 接受拖放的元素 --> </div>
dropWhilePredicate = (dragEvent: DragEvent) => {
// 是否接受拖放
return dragEvent.dataTransfer && dragEvent.dataTransfer.types.includes('myType');
}draggable
draggable 指令可以将任何指令或元素注册为可拖动元素，以支持将元素拖动到 droppable 指令中。
下面是 draggable 指令的基本用法：
<div draggable [dragData]="{ data: 'hello world!' }">
<!-- 可拖动的元素 -->
</div>其中 [dragData] 是指定拖动时要传递给 droppable 的数据。
我们也可以使用 dragWhile 选项来进一步控制 draggable 的拖动条件。例如，当用户按下某个键时才允许拖动：
<div draggable [dragWhile]="dragWhilePredicate" [dragData]="{ data: 'hello world!' }">
<!-- 可拖动的元素 -->
</div>dragWhilePredicate = (dragEvent: MouseEvent) => {
return dragEvent.ctrlKey;
}DndService
DndService 是提供了拖放所使用的所有事件和数据，包括拖放时的源始元素、拖动的元素、拖放目标元素等等。我们可以使用 DndService 的各种方法和属性来进一步自定义拖放逻辑和行为。
下面是 DndService 的基本用法：
-- -------------------- ---- ------- ------ - ---------- - ---- ------------------- ------------------- ----------- ----------- -- ---------------------- ---------- - -------------------------------------- - ----- ------ ------- --- - ----------------- ---------- - ----- -------- - --------------------------------------- ---------------------- -
示例代码
下面是一个示例，演示如何使用 ngx-frenetiq-dnd 来实现列表框的拖拽排序。首先我们创建一个 items 数组，它会被绑定到列表框中：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
----
--- ----------- ---- -- ------ ------------------ --------------------------
---- ------------------ ----------------- ----------------------------------
-- --------- --
------
-----
-----
-
--
------ ----- ------------ -
----- - -
- ----- -------- ----- --- --
- ----- --------- ----- --- --
- ----- --------- ----- --- --
- ----- --------- ----- --- --
--
------------- ----
------------ -------
------------------ ----------- ----- ---- ---- ------- -
----------------- - -----
---------------- - ----
-- -- ---------- ------
---------------------------------
-
------------- ---------- -
-- -------
----- ---- - ---------------------------------- -- ---
-- ------------
-- ------------ --- ------- -
----- ------- - -----------
----- ------- - ---------------- - ------- - ---------------- - ---------------- - --
----- ------ - -------------------------- ---
-------------------------- -- ------
-
-
-在这个示例中，我们使用了 draggable 指令来将每个列表项设置为可拖动的元素。当用户按下鼠标时，我们使用 dndService 开始拖动并将拖动索引保存在 dragIndex 中。然后在 onDrop 回调函数中，我们获取 dndService 中保存的拖动数据，并将拖放的元素重新排序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d0e81e8991b448daa2a