SortableJS拖拽时隐藏列表项致布局错乱的解决方法问询

核心思路 #

别直接用display: none移除原元素——这会触发布局塌陷。换用视觉隐藏但保留占位的方式，既实现拖拽时隐藏原项的需求，又维持原有布局结构。

具体实现方案 #

方案1：visibility + 固定占位高度 #

这是最简单的方案，利用visibility: hidden让元素不可见但仍占据空间：

1. 定义CSS类：

.drag-placeholder {
  visibility: hidden;
  height: 42px; /* 匹配你的列表项实际高度 */
  margin: 8px 0; /* 同步列表项的外边距 */
}

2. 绑定Sortable事件控制类的添加/移除：

// 初始化List1的Sortable
new Sortable(document.getElementById('list1'), {
  group: 'todo-group',
  onStart: (evt) => {
    evt.item.classList.add('drag-placeholder');
  },
  onEnd: (evt) => {
    evt.item.classList.remove('drag-placeholder');
  }
});

// 同理初始化List2
new Sortable(document.getElementById('list2'), {
  group: 'todo-group',
  onStart: (evt) => {
    evt.item.classList.add('drag-placeholder');
  },
  onEnd: (evt) => {
    evt.item.classList.remove('drag-placeholder');
  }
});

方案2：自定义拖拽克隆体 + 原项占位 #

如果想要拖拽时只显示独立的拖拽卡片，完全屏蔽原列表的视觉干扰，可以结合Sortable的克隆功能：

1. 定义拖拽克隆体的样式：

.custom-drag-ghost {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 8px 12px;
  /* 完全匹配列表项的样式 */
}

2. 初始化Sortable时配置ghostClass，同时保留原项占位：

new Sortable(document.getElementById('list1'), {
  group: 'todo-group',
  ghostClass: 'custom-drag-ghost',
  onStart: (evt) => {
    evt.item.classList.add('drag-placeholder');
  },
  onEnd: (evt) => {
    evt.item.classList.remove('drag-placeholder');
  }
});

方案3：固定列表容器高度 #

如果你的待办列表高度固定，直接给容器设置固定高度，确保即使原项隐藏，容器空间也不会塌陷：

.todo-list-container {
  height: 180px; /* 根据列表项数量计算总高度 */
  overflow-y: auto; /* 内容超出时显示滚动条 */
}

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