利用sortablejs实现拖拽列表组件

Sortable.js 是一个 JavaScript 库，用于实现可拖放元素的列表。要使用 Sortable.js 实现拖拽列表组件，需要进行以下步骤：

1. 引入 Sortable.js 库。你可以通过 CDN 或将库文件下载到本地并引入到项目中。示例代码如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.13.0/Sortable.min.js"></script> 

2. 创建一个 HTML 列表，将要拖动的元素放入其中。示例代码如下：

<ul id="sortable-list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> 

3. 初始化 Sortable.js。在 JavaScript 中，使用 Sortable.create() 方法初始化列表。示例代码如下：

var sortableList = document.getElementById('sortable-list'); Sortable.create(sortableList); 

这样，你就实现了一个基本的拖拽列表组件。现在你可以尝试在网页上拖动列表项并改变它们的顺序。

此外，Sortable.js 还提供了许多配置选项和可用的事件，可以自定义拖拽列表组件的行为。你可以查看 Sortable.js 的文档，以了解更多关于如何使用该库的信息。