jQuery排序拖拽

实现列表项的拖拽排序功能，用户可以通过鼠标拖动重新排列顺序。 · 难度：入门 · +15XP

jQuery排序拖拽

拖拽排序（Sortable）允许用户通过鼠标拖动来重新排列列表项，常用于任务管理、相册排序等场景。使用jQuery UI的sortable插件可以快速实现。

引入jQuery UI

需要额外引入jQuery UI库：<script src='https://code.jquery.com/ui/1.13.0/jquery-ui.min.js'></script>。

基础用法

$('#sortable-list').sortable({
  update: function() {
    var order = $(this).sortable('toArray');
    console.log('新顺序：', order);
  }
});

选项说明

练习提示

在右侧代码中，添加一个handle选项，让用户只能通过左侧的拖拽图标来拖动。