背景
当我们开发前端项目时，经常会遇到需要对页面元素进行拖拽排序的需求。在这种情况下，我们可以使用 Sortable.js 这个库来完成。然而，只使用 Sortable.js 存在一些问题，比如拖拽过程中列表项之间的间距变化较大，影响了拖拽体验。为了解决这个问题，我们可以使用 angular-sortablejs-float 这个 npm 包，它可以使列表项之间的间距尽可能小，从而提升拖拽体验。
安装
使用 npm 安装 angular-sortablejs-float：
npm install angular-sortablejs-float --save
使用
在 Angular 中使用
- 在配置模块时，注入
SortablejsFloatModule：
-- -------------------- ---- -------
------ - --------------------- - ---- ---------------------------
-----------
-------- -
---------------------- ----- ---------------------
-------
-
--
------ ----- --------- - -- 在组件中使用：
<ul sortablejsFloat [(ngModel)]="items">
<li *ngFor="let item of items">{{ item }}</li>
</ul>其中，ngModel 双向绑定一个数组 items，并使用 *ngFor 渲染出列表项。sortablejsFloat 是一个指令，作用于 ul 元素上。
- 在组件中引入
SortablejsOptions和SortablejsCallback：
import { SortablejsOptions, SortablejsCallback } from 'angular-sortablejs-float';这两个变量分别对应 Sortable.js 的配置参数和回调函数。你可以根据实际需求使用它们。
配置
options
在使用 sortablejsFloat 指令时，可以传入配置参数，用于配置 Sortable.js：
-- -------------------- ---- -------
---
---------------
-------------------
------------
------ ------------
---------- -------------
------- -------------
--
-
--- ----------- ---- -- --------- ---- -------
-----options 对象中可以传递 Sortable.js 支持的所有参数。例如，可以设置 group 为一个分组名称，来限制同一列表内的拖拽操作。direction 参数用于设置拖拽方向，取值为 "vertical" 或 "horizontal"。onSort 参数是一个回调函数，在排序完成时会被调用，可以在该回调函数中进行一些逻辑处理。
Callbacks
除了在 options 中定义回调函数之外，还可以使用类似 Angular 自定义事件的方式，从 sortablejsFloat 指令中监听 Sortable.js 回调事件：
<ul
sortablejsFloat
[(ngModel)]="items"
(onSort)="onSortHandler($event)"
>
<li *ngFor="let item of items">{{ item }}</li>
</ul>此时，当 Sortable.js 触发 onSort 回调事件时，onSortHandler() 方法会被调用并传递事件对象 $event。
示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------ ------------------ - ---- ---------------------------
------------
--------- -----------
--------- -
--- --------------- ------------------- ------------------- --------------------------
--- ----------- ---- -- --------- ---- -------
-----
-
--
------ ----- ------------ -
----- - ------ --- ----- --- ----- ----
-------- ----------------- - -
------ ------------
---------- -------------
---------- ---
--
------------- ----- ---- -
-- -- --------- ---- --- ------ -----
-------------------
-
-总结
使用 angular-sortablejs-float 可以解决拖拽过程中间距过大的问题，使得拖拽体验更加流畅。此外，通过配置参数和回调函数，可以满足更多的场景需求。在实际项目中，有必要针对具体情况进行调整和优化，以保证最佳的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057cb781e8991b448ebffe