jQuery排序拖拽

学习使用jQuery实现拖拽排序功能，用户可以通过拖拽重新排列列表项。 · 难度：入门 · +15XP

jQuery排序拖拽

拖拽排序让用户通过鼠标拖拽来重新排列元素顺序，常用于任务列表、收藏夹等场景。

概念讲解

实现步骤：

• 使用mousedown、mousemove、mouseup事件。
• 在拖动时，实时更新元素位置。
• 在放置时，交换DOM元素或更新数据。

为了简化，我们可以利用jQuery UI的sortable()插件，但本教程使用原生jQuery实现。

代码示例

var dragItem = null;
$('.item').on('mousedown', function(e) {
  dragItem = $(this);
});
$(document).on('mousemove', function(e) {
  if (dragItem) {
    dragItem.css({ top: e.pageY - 25, left: e.pageX - 50 });
  }
});
$(document).on('mouseup', function() {
  dragItem = null;
});

表格：事件说明

事件	触发时机
mousedown	鼠标按下
mousemove	鼠标移动
mouseup	鼠标释放

练习提示

在starter_code中，添加放置时的交换逻辑，让两个列表项互换位置。