jQuery UI拖拽排序场景下drop事件未触发Ajax问题求助

• 核心原因是jQuery UI的sortable组件已经内部拦截并处理了原生的drop事件，它自己封装了一套拖拽排序的专属事件体系（比如update、stop），你手动绑定的原生drop事件会被sortable的事件逻辑覆盖，自然无法触发。
• click事件能正常触发，是因为sortable组件不会拦截处理click这类基础事件，所以不受影响。

正确的实现方式 #

不需要额外绑定drop事件，直接用sortable提供的update或stop事件来触发Ajax请求即可，这两个事件都是在拖拽放置完成、元素位置确定后触发的，完全符合你的需求。示例代码如下：

// 假设你的ul元素ID是image-list
$("#image-list").sortable({
  // update事件：排序完成且元素位置变更后触发
  update: function(event, ui) {
    // 获取排序后的元素ID序列（假设li上有data-id属性存图片ID）
    var sortedIds = $(this).sortable("toArray", { attribute: "data-id" });
    // 发送Ajax请求保存排序
    $.ajax({
      url: "/save-sort-order",
      method: "POST",
      data: { order: sortedIds },
      success: function(res) {
        console.log("排序已保存");
      },
      error: function(err) {
        console.error("保存失败", err);
      }
    });
  }
});

如果需要在拖拽完全停止（包括动画结束）后触发，也可以用stop事件替换update，两者的区别是：update在位置变更后立即触发，stop在拖拽动作完全结束（比如鼠标松开、动画完成）后触发，根据你的需求选择即可。

内容的提问来源于stack exchange，提问作者Asario