能否暂停jQuery UI Sortable拖拽排序以询问用户问题？

要实现自定义弹窗且暂停排序等待用户操作，核心是手动接管排序流程，而非依赖Sortable的自动完成逻辑，具体实现步骤如下：

• 拦截beforeStop事件的默认行为，阻止Sortable自动完成排序
• 保存拖拽项的原始位置信息，方便用户取消时恢复原状
• 调用自定义确认弹窗，根据用户选择决定最终排序结果

具体代码实现 #

// 初始化Sortable组件
$("#sortable").sortable({
  beforeStop: function(e, ui) {
    // 1. 阻止默认排序终止行为，暂停排序流程
    e.preventDefault();
    
    // 2. 保存拖拽项的原始状态：原父容器、原索引
    const originalParent = ui.item.parent();
    const originalIndex = ui.item.index();
    
    // 3. 调用自定义确认弹窗
    customConfirmDialog("是否执行特殊操作？", function(result) {
      if (result) {
        // 用户确认：手动完成排序并执行自定义逻辑
        ui.item.insertAfter(ui.placeholder);
        ui.item.addClass("special");
        // 手动触发update回调，保证原有逻辑正常执行
        $("#sortable").trigger("sortupdate", {item: ui.item});
      } else {
        // 用户取消：将拖拽项恢复到原始位置
        ui.item.insertAfter(originalParent.children().eq(originalIndex - 1));
      }
      
      // 清除占位符，恢复组件状态
      ui.placeholder.remove();
    });
  },
  update: function(e, ui) {
    // 此处放置原本的排序完成逻辑，用户确认后会被手动触发
    console.log("排序已完成");
  }
});

// 模拟自定义确认弹窗（可替换为你项目中的弹窗组件）
function customConfirmDialog(message, callback) {
  const dialog = $("<div>").text(message).appendTo("body");
  const confirmBtn = $("<button>").text("确认").on("click", () => {
    dialog.remove();
    callback(true);
  });
  const cancelBtn = $("<button>").text("取消").on("click", () => {
    dialog.remove();
    callback(false);
  });
  
  dialog.append(confirmBtn).append(cancelBtn);
  // 基础样式（可根据需求自定义）
  dialog.css({
    padding: "15px",
    border: "1px solid #ddd",
    position: "fixed",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    zIndex: 9999,
    background: "#fff"
  });
}

关键说明 #

• e.preventDefault()是核心，它中断了Sortable的自动排序流程，让我们能完全控制后续操作
• 保存原始位置信息是为了在用户取消时精准恢复拖拽项，避免排序混乱
• 手动触发sortupdate事件可以复用原本的update回调逻辑，无需额外修改现有代码
• 自定义弹窗可完全替换成项目中已有的组件（如Bootstrap Modal、自定义UI弹窗等），只需保证回调函数能正确传递用户选择结果

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