在前端开发中，拖拽排序成为了越来越流行的交互方式。而 Angular 6 则为我们提供了两个强大的拖拽排序工具：Sortablejs 和 Angular Dragula。这篇文章将针对这两个工具进行详细的使用教程，帮助读者掌握这两个工具的使用方法，使得前端开发更加高效和便捷。
什么是 Sortablejs？
Sortablejs 是一款基于原生 JavaScript 实现的交互式拖拽排序库。这个库支持很多的拖拽排序应用场景，比如列表、表格、树形结构等，而且这个库非常灵活，支持多个排序列表共存、嵌套排序列表等特性。
如何在 Angular 6 中使用 Sortablejs？
- 首先，我们需要引入 Sortablejs 库以及相关的样式文件。可以使用以下命令进行安装：
npm install sortablejs @types/sortablejs --save
- 在 Angular 中使用 Sortablejs 也需要引入相应的模块，可以使用以下命令导入：
import Sortable from 'sortablejs';
- 接下来，我们需要在组件中定义一个容器，用于放置我们需要拖拽排序的元素，可以使用以下 HTML 代码：
<ul id="sortable"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul>
- 最后，在组件的 ngAfterViewInit 生命周期函数中初始化 Sortablejs，可以使用以下代码：
ngAfterViewInit() {
const sortable = new Sortable(document.getElementById('sortable'), {
animation: 150
});
}这样，我们就成功地使用 Sortablejs 对列表进行了拖拽排序。当然，Sortablejs 还有很多其他的配置和事件，读者可以根据自己的需要进行自定义。
什么是 Angular Dragula？
Angular Dragula 是对 Dragula.js 的 Angular 封装，是另一款强大的拖拽排序工具。这个库支持多个拖拽容器之间的拖拽排序，而且非常易用。
如何在 Angular 6 中使用 Angular Dragula？
- 首先，我们需要引入 Angular Dragula 库以及相关的样式文件。可以使用以下命令进行安装：
npm install ng2-dragula ng2-dragula-style --save
- 在 Angular 中使用 Angular Dragula 也需要引入相应的模块，可以使用以下命令导入：
import { DragulaService } from 'ng2-dragula';- 接下来，在组件中通过依赖注入的方式注入 DragulaService，可以使用以下代码：
constructor(private dragulaService: DragulaService) { }- 在 ngOnInit 生命钩子函数中，我们需要在 DragulaService 中创建一个组，用于实现多个拖拽容器之间的拖拽排序，可以使用以下代码：
ngOnInit() {
this.dragulaService.createGroup('ITEMS', {
direction: 'vertical',
moves: (el, container, handle) => {
return handle.className === 'handle';
}
});
}这里我们创建了一个名为 'ITEMS' 的组，其中的 direction 属性表示拖拽排序的方向，而 moves 方法表示只有在 handle 的 className 为 'handle' 的元素才可以拖拽。
- 最后，在 HTML 模板中进行拖拽容器的定义。这里需要注意的是，每个拖拽容器必须都有一个相同的类名，这个类名就是定义组时的组名。可以使用以下代码：
-- -------------------- ---- -------
---- --------------------
-----
---- ------------------- -------
------
-----
---- ------------------- -------
------
-----
---- ------------------- -------
------
-----
---- ------------------- -------
------
-----
---- ------------------- -------
------
------这样，我们就成功地使用 Angular Dragula 对多个拖拽容器进行了拖拽排序。当然，Angular Dragula 也有其他的配置和事件，读者可以根据自己的需要进行自定义。
总结
在本文中，我们详细介绍了 Angular 6 中的拖拽排序工具 Sortablejs 和 Angular Dragula 的使用方法，希望对读者对前端开发中的拖拽排序有所帮助。两个工具都是非常强大而灵活的，读者可以根据自己的实际需要进行选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ed97b5f6b2d6eab37bdcc4