Sortable.js 是一个强大的 JavaScript 库，用于在网页上实现拖拽排序功能。允许你定制拖放行为，如设置拖动把手、限制拖动方向、设置拖动动画等。同时，它还提供了丰富的事件，如 onStart、onEnd、onUpdate 等，让你可以在拖放过程中执行自定义逻辑。

使用方法：

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<script src="path_to/sortablejs/Sortable.min.js"></script>
<script>
  var el = document.getElementById('myList');
  Sortable.create(el, {
    animation: 150, // 动画时间
    ghostClass: 'sortable-ghost' // 拖拽时的占位符类名
  });
</script> 

配置选项：

Sortable.js 提供了一系列配置选项，以适应不同的使用场景：

group：定义拖拽元素所属的组，用于多列表拖拽。

sort：设置是否允许在列表内部进行拖拽排序。

disabled：禁用或启用排序功能。

store：存储拖拽列表的排序状态。

handle：指定可用作拖拽把手的元素选择器。

filter：通过选择器指定不能拖拽的元素。

animation：设置拖拽元素在列表间移动时的动画时间。

onStart：当拖拽开始时触发的事件。

onEnd：当拖拽结束时触发的事件。

onUpdate：当列表排序更新时触发的事件。

onChoose：当元素被选择为拖拽源时触发的事件。

onUnchoose：当元素被取消选择时触发的事件。

onSort：当元素在列表内部移动时触发的事件。

onFilter：当尝试拖拽一个被过滤的元素时触发的事件。

onMove：在拖拽过程中，每次元素移动时触发的事件。

功能和特性：

跨浏览器支持：在所有现代浏览器以及 Internet Explorer 9+ 上无缝工作。

触摸支持：为移动设备和平板电脑提供流畅的触摸拖拽体验。

动画效果：在拖拽过程中，元素的移动带有平滑的动画效果。

多列表拖拽：可以在多个列表之间拖拽元素，实现复杂的排序逻辑。

列表到列表拖拽：允许用户将元素从一个列表拖拽到另一个列表。

拖拽把手：可以指定特定的元素作为拖拽把手。

拖拽克隆：在拖拽过程中显示元素的克隆，以提供视觉反馈。

拖拽镜像：创建一个元素的镜像，跟随鼠标或触摸点移动。

拖拽源检测：可以控制元素是否可以作为拖拽源。

拖拽过滤：过滤特定元素，不允许它们被拖拽。

拖拽方向限制：限制拖拽只能在垂直或水平方向进行。

《前端资源推荐》收集各种前端组件 UI 框架、JS 插件工具、中后台系统模板、动画库、低代码、可视化资源、开源项目、学习资源、特效源码等，如有其他优秀资源，欢迎发消息投稿，感谢点赞、转发、关注！！！

GitHub：https://github.com/SortableJS/Sortable

官方文档：https://sortablejs.github.io/Sortable