jQuery Sortable需求：移除列表项时保留空白占位

嘿，这个需求其实很好实现，核心就是不要真正删除DOM元素，而是通过固定占位容器保留原位置空间，同时调整jQuery Sortable的配置适配这个逻辑。我给你一套完整的实现方案，包括适配单一项的场景：

我们给每个看板便签套一层固定高度的占位容器，移除便签时仅隐藏内部的内容项，占位容器始终保留，这样其他项就不会上移填补空白。同时调整Sortable的配置，让它只拖拽内部的便签元素，忽略占位容器。

HTML结构 #

<div class="kanban-board">
  <div class="column">
    <h3>待办列表</h3>
    <div class="sortable-list">
      <!-- 每个便签都包裹在占位容器内 -->
      <div class="item-placeholder">
        <div class="kanban-item">
          任务1 <button class="remove-btn">移除</button>
        </div>
      </div>
      <div class="item-placeholder">
        <div class="kanban-item">
          任务2 <button class="remove-btn">移除</button>
        </div>
      </div>
    </div>
  </div>
</div>

CSS样式 #

.kanban-board {
  display: flex;
  gap: 20px;
  padding: 20px;
}
.column {
  width: 300px;
  background: #f5f5f5;
  padding: 12px;
  border-radius: 8px;
}
.sortable-list {
  min-height: 100px;
}
/* 占位容器：固定最小高度，和便签高度匹配 */
.item-placeholder {
  min-height: 80px;
  margin: 8px 0;
  border: 1px dashed #ddd; /* 可选：显示占位边框，方便识别 */
  border-radius: 4px;
}
.kanban-item {
  background: white;
  padding: 12px;
  border-radius: 4px;
  cursor: move;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* 隐藏便签，但占位容器依然保留 */
.kanban-item.hidden {
  display: none;
}
.remove-btn {
  float: right;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
}

JavaScript配置 #

$(function() {
  // 初始化Sortable：仅针对内部的便签元素
  $(".sortable-list").sortable({
    items: ".kanban-item", // 只拖拽便签，不处理占位容器
    connectWith: ".sortable-list", // 支持跨列拖拽（如果有多列看板）
    placeholder: "ui-state-highlight",
    cancel: ".item-placeholder", // 禁止拖拽占位容器
    // 拖拽结束后确保便签始终在占位容器内
    stop: function(event, ui) {
      if (!ui.item.parent().hasClass("item-placeholder")) {
        // 如果便签被拖到了列表根节点，自动给它套上占位容器
        ui.item.wrap("<div class='item-placeholder'></div>");
      }
    }
  });

  // 移除按钮逻辑：隐藏便签而非删除DOM
  $(".remove-btn").on("click", function() {
    const targetItem = $(this).closest(".kanban-item");
    targetItem.addClass("hidden");
    // 这里可以加后端同步逻辑：标记该占位容器对应的任务已删除
  });

  // 可选：恢复隐藏便签的功能示例
  // $(".restore-all-btn").on("click", function() {
  //   $(".kanban-item.hidden").removeClass("hidden");
  // });
});

1. 占位容器的作用：item-placeholder固定了最小高度，即便内部便签被隐藏，容器依然占据原位置，其他便签不会上移。
2. Sortable配置适配：通过items指定仅拖拽便签元素，cancel排除占位容器，避免干扰排序逻辑。
3. 单一项场景适配：当列表只有一个便签时，隐藏后占位容器依然存在，列表不会变成空状态，完全符合需求。
4. 数据同步注意：如果需要和后端交互，移除时不要删除DOM，而是标记该占位容器对应的任务为“已删除”，提交数据时再处理。

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