jQueryUISortable禁用排序项技巧

// ❌ 错误做法：仅更新 items 选项或调用 refresh
$("#sortableList").sortable("option", "items", "li:not(.non-sortable-item)");
// 或
$("#sortableList").sortable("refresh");

但实际运行中会发现：初始状态正常（占位符不可拖），一旦执行过“删除图片 → 再次上传”操作后，原本应不可拖的占位符突然变得可拖了——即使 DOM 上仍存在 class="non-sortable-item"，且 items 选项也已重设。

根本原因：jQuery UI Sortable 的 items 选项不可热更新

jQuery UI Sortable 在初始化时会一次性解析 items 选择器并缓存匹配的可拖拽元素集合；后续调用 "option", "items" 仅修改内部配置值，并不会重新扫描 DOM 或重建可拖拽元素列表。refresh() 方法同样只重置当前已知可拖元素的位置和样式，不响应 items 选择器变更。因此，当 .non-sortable-item 类动态增删导致可拖元素集合实际变化时，Sortables 仍按旧缓存执行，造成行为错乱。

✅ 正确解法：销毁并重建实例

唯一可靠的方式是显式销毁现有 Sortable 实例，再以更新后的 items 配置重新初始化：

// ✅ 正确：销毁 + 重建（在 uploadNewImage 和 deleteUploadedImage 中统一调用）
function refreshSortable() {
  $("#sortableList").sortable("destroy");
  $("#sortableList").sortable({
    items: "li:not(.non-sortable-item)", // 确保每次重建都使用最新规则
    placeholder: "ui-sortable-placeholder", // 可选：添加拖拽占位样式
    tolerance: "pointer"
  });
}

// 在 uploadNewImage 中（移除 non-sortable-item 类后）：
$('#imageListItem_'+imageNumber).removeClass('non-sortable-item');
refreshSortable(); // ? 关键：重建实例

// 在 deleteUploadedImage 中（添加 non-sortable-item 类后）：
$('#imageListItem_'+imageIndex).addClass('non-sortable-item');
refreshSortable(); // ? 关键：重建实例

? 注意：refreshSortable() 应在所有影响 items 选择器匹配结果的 DOM 操作（如 addClass/removeClass、show/hide、appendTo）完成后立即调用，确保重建时 DOM 状态与预期一致。

完整优化示例（关键片段）

$(document).ready(function() {
  // 初始初始化
  refreshSortable();
});

function uploadNewImage(thisObject, e) {
  const imageNumber = thisObject.getAttribute("imageIndex");
  const imageFile = e.target.files[0];

  // ...（原有图片处理逻辑）...

  // 移除不可拖类，显示图片
  $('#imageListItem_'+imageNumber).removeClass('non-sortable-item');
  $('#enableFileUpload_'+imageNumber).hide();
  $('#deleteUploadImageSymbol_'+imageNumber).show();

  // 显示下一个占位符（如有）
  $('*[id*=imageListItem_]:hidden').first().show();

  // ✅ 重建 Sortable —— 这是核心修复点
  refreshSortable();
}

function deleteUploadedImage(imageIndex) {
  // ...（原有清理逻辑）...

  // 隐藏图片区域，显示上传占位符
  $('#imageItem_'+imageIndex).css('background-image', 'none');
  $('#deleteUploadImageSymbol_'+imageIndex).hide();
  $('#enableFileUpload_'+imageIndex).show();

  // 将该 <li> 移至末尾并标记为不可拖
  const $item = $('#imageListItem_'+imageIndex);
  $item.addClass('non-sortable-item').hide().appendTo('#sortableList');

  // ✅ 重建 Sortable
  refreshSortable();
}

注意事项与最佳实践

• 性能考量：虽然销毁重建略重于 refresh()，但在图像上传场景（通常 ≤10 项）中无感知；若列表极大，可封装防抖逻辑，但本例无需过度优化。
• 事件绑定安全：destroy() 不会影响
  上的原生事件监听器（如 click），但会清除 Sortable 自身绑定的拖拽事件。由于你的业务逻辑（上传/删除）均通过独立函数触发，无兼容风险。
  • 避免重复初始化：确保 refreshSortable() 内部不重复调用 sortable()（例如检查是否已初始化），或直接在 ready 中初始化一次，后续只调用 destroy+sortable。
  • 现代替代建议：长期项目可考虑迁移到 SortableJS（原生、轻量、支持动态 filter 选项），其 option('filter', '.non-sortable-item') 可实时生效，无需销毁重建。

  通过 destroy + 重建的方式，你将彻底解决 jQuery UI Sortable 动态控制可拖拽项的顽疾，确保用户交互逻辑始终符合设计预期。

  文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《jQueryUISortable禁用排序项技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。

  您即将跳转至第三方网站，请注意保护好个人信息和财产安全！

  继续访问