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

闲人艺菲提问于 2026-02-27 20:54:20 阅读 34

交互

我在用 SortableJS 做一个可拖拽的列表，但一拖起来 item 的宽度就变窄了，布局直接崩掉。试过加 fixed 宽度也不行，是不是我 CSS 写得有问题？

这是我的 item 样式：

.drag-item {
  display: flex;
  padding: 12px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  width: 100%;
  box-sizing: border-box;
}

我来解答赞 4 收藏

反馈

1 条解答

ლ雪利 Lv1

这个问题我之前踩过坑，折腾了大半天才发现原因。

问题出在 SortableJS 拖拽时会创建一个"幽灵元素"跟随鼠标移动，这个元素默认是被 append 到 body 上的。你想想，它脱离了原来的父容器，那 width: 100% 自然就失效了，变成 body 的 100% 或者干脆没有宽度。

别走弯路，直接用 forceFallback 配合 fallbackOnBody 解决：

new Sortable(yourContainer, {

  forceFallback: true,

  fallbackOnBody: true,

  fallbackClass: 'drag-item-ghost',

  // 其他配置...

});

然后 CSS 里给幽灵元素一个明确的宽度：

.drag-item-ghost {

  width: 你容器的实际宽度 !important;

  opacity: 0.5;

  background: #f5f5f5;

}

如果你容器宽度是动态的，不想写死，还有个骚操作。用 JS 在初始化时动态获取：

const containerWidth = document.querySelector('.your-container').offsetWidth + 'px';

然后动态设置 ghost 样式，或者直接用 CSS 变量也行。

我当时就是死活没想到元素会被扔到 body 外面去，一直以为是 flex 布局的问题，后来用 DevTools 一看元素结构才恍然大悟。以后遇到拖拽样式问题，先看元素实际被放哪了。

2026-02-28 15:11