拖拽排序的列表交互在后台系统里用得可不少，尤其是你要管项目、任务、数据列表的时候，整点好用的插件省不少事。jq sortable2就是这么一个挺顺手的工具，基于 jQuery，扩展自 jQuery UI 的 sortable。配置简单，效果直观，稍微写几行就能跑起来。

HTML 列表加个 .sortable() 方法，马上就能拖来拖去，顺序任你调。像下面这样：

    
  
  • Item 1
    • 
  
  • Item 2
    • 
  
  • Item 3
    • 



$(function() {
  $("#mySortable").sortable();
});

功能上也不算简陋，像 拖动方向（axis）、占位符（placeholder）、多列表互通（connectWith）这些配置都支持。配上事件监听，比如 start、update、stop，该响应的都能接上。

你要是还想把顺序保存到后端，直接用 serialize() 方法就行，配个 $.post() 提交过去，代码看着也清爽：

$("#mySortable").sortable({
  update: function(event, ui) {
    var serializedData = $(this).sortable('serialize') + '&action=updateOrder';
    $.post("saveOrder.php", serializedData);
  }
});

浏览器兼容性也还行，主流的都能跑。老版本 IE 得引入 jQuery UI 的 Mouse 模块，要注意下。

如果你手上有用 jQuery 的老项目，或者想快速加个排序交互，jq sortable2真挺合适，简单直接，省得折腾。