Sortable.js是一款轻量级但功能强大的JavaScript库，其主要用途是实现列表项的拖拽排序功能，它支持触屏设备和大多数现代浏览器（不支持IE9及以下版本），适合于需要在网页上实现元素顺序动态调整的场景。使用Sortable.js可以很方便地为网页元素添加拖拽功能，让网页具备更好的交互性。
### Sortable.js特点介绍：
1. **轻量级且功能强大**：Sortable.js虽然小巧，但能够实现复杂的拖拽排序功能。
2. **动画效果**：在拖拽列表项时，Sortable.js提供平滑的动画效果，提升用户体验。
3. **支持触屏设备**：适用于触摸屏设备，用户可以像在桌面浏览器中一样进行拖拽操作。
4. **跨浏览器兼容性**：除了IE9及以下版本的浏览器外，Sortable.js兼容主流浏览器，保证了广泛的使用范围。
5. **容器内外排序支持**：它可以实现单个列表容器内部的拖拽排序，也能实现在两个列表容器之间的拖拽排序。
6. **拖放操作与文本选择**：用户不仅可以拖拽整个列表项，还可以选择列表项内部的文本进行拖拽。
7. **友好滚动效果**：当列表内容超出视窗时，Sortable.js能够提供非常友好的滚动效果，以便用户拖拽时能够看到更多内容。
8. **原生HTML5拖放API**：Sortable.js基于原生HTML5拖放API构建，易于理解和使用。
9. **框架兼容性**：Sortable.js对多种前端框架友好，比如Angular、Vue、React等。
10. **CSS框架支持**：它支持所有流行的CSS框架，如Bootstrap。
11. **简单易用的API**：Sortable.js提供了一个简洁的API，使得开发者可以轻松调用其功能。
12. **CDN支持与非jQuery依赖**：它不仅可以通过CDN引入，还特别强调不依赖于jQuery，适用于已经使用其他库或者想减少依赖的项目。
### Sortable.js使用方法：
1. **引入Sortable.js**：在网页中引入Sortable.js库文件。
2. **初始化**：通过JavaScript创建一个Sortable实例，通常这会发生在页面的`$(document).ready()`函数中。
3. **配置选项**：在初始化Sortable时，可以通过配置选项来设置拖拽的手柄、动画时长、排序事件等。
4. **事件回调**：通过配置事件回调函数（如`onStart`和`onEnd`），可以在拖拽开始和结束时执行自定义操作。例如，在排序结束时，可以更新列表项的序号，确保它们是连续的。
5. **容器间排序**：在实现两个列表容器互相拖拽排序时，需要为两个列表容器都创建Sortable实例，并在配置中指定可以接受拖拽过来的元素。
### 实例分析：
1. **单个列表容器内部排序**：在给定的实例中，我们创建了一个ul元素，列表项包括文本输入框、层级输入框和下拉选择框。通过Sortable.js，我们将这些列表项设置为可拖拽。当列表项被拖动到新位置后，我们会通过`onEnd`事件回调函数重新编号每个列表项，以反映新的顺序。
2. **两个列表容器相互拖拽排序**：在另一个实例中，可能有两个不同的列表容器（例如两个不同的ul元素），用户可以将一个列表中的项拖拽到另一个列表中。这种操作同样可以通过Sortable.js的实例化和配置来实现。
Sortable.js作为一个功能强大且易于使用的拖拽排序库，在项目中能够极大地提升用户交互体验，特别适合需要动态排序列表项的Web应用。
