用 sortablejs 拖拽时元素样式错乱怎么办？

夏侯薪羽提问于 2026-03-25 19:50:20 阅读 11

交互

我在用 SortableJS 做一个可拖拽排序的列表，但一拖起来元素就跑偏了，原本是 flex 布局横向排列，拖动时却变成竖着堆叠，而且宽度也不对。试过加 transform: translate 不生效，是不是我 CSS 写得有问题？

这是我的样式：

.drag-list {
  display: flex;
  gap: 10px;
}
.drag-item {
  width: 80px;
  height: 80px;
  background: #eee;
  cursor: move;
}

用户交互

我来解答赞 7 收藏

反馈

1 条解答

UX-万华 Lv1

我之前也碰到过这个问题，SortableJS 默认的拖拽行为确实会影响布局。问题出在它会在拖动时给元素添加一些内联样式，打乱你的 flex 布局。

你可以在初始化 Sortable 时加上一个选项 forceFallback: true，这样可以避免使用原生的拖拽效果，保持元素样式更稳定。

另外建议给拖拽中的元素加个 class 来专门处理样式，Sortable 会自动帮你添加 sortable-ghost 类名，你可以这样写：



.drag-list {

  display: flex;

  gap: 10px;

}

.drag-item {

  width: 80px;

  height: 80px;

  background: #eee;

  cursor: move;

}

.sortable-ghost {

  width: 80px !important; /* 强制保持宽度 */

  opacity: 0.5; /* 可选：让拖动中的元素半透明 */

}

这个方法我在好几个项目里都用过，应该能解决你的问题。记得检查其他 CSS 样式有没有冲突，有时候外部样式也会影响布局。

2026-03-25 21:10