如何自定义Vue.Draggable的ghost元素？表格拖拽高度优化需求

针对你遇到的表格tbody拖拽时，ghost元素（列表中占位的蓝色元素）过高导致的问题，直接用CSS隐藏行的方法会破坏Sortable的位置计算逻辑——因为Sortable会在拖拽开始时缓存原元素的尺寸，后续依赖这个尺寸计算光标相对位置。下面提供两种可靠的解决方案：

方案一：自定义Ghost元素（推荐） #

利用Sortable的onStart事件，替换默认的ghost为你自定义的简化版tbody（只保留首行），这样既缩小了高度，又能让Sortable基于新的ghost尺寸计算位置。

实现步骤： #

1. 在Vue.Draggable组件上绑定@start事件，并获取Sortable实例：

<draggable
  ref="draggable"
  v-model="tableRows"
  tag="tbody"
  @start="handleDragStart"
>
  <tbody v-for="row in tableRows" :key="row.id">
    <!-- 你的多行表格内容 -->
    <tr><td>{{ row.header }}</td></tr>
    <tr><td>{{ row.content }}</td></tr>
    <tr><td>{{ row.footer }}</td></tr>
  </tbody>
</draggable>

2. 在组件逻辑中实现拖拽开始时的自定义ghost替换：

export default {
  data() {
    return {
      tableRows: [] // 你的表格数据
    };
  },
  mounted() {
    // 获取Sortable实例
    this.sortable = this.$refs.draggable.sortable;
  },
  methods: {
    handleDragStart(evt) {
      const originalTbody = evt.item;
      // 创建简化版tbody：只复制首行
      const simplifiedGhost = originalTbody.cloneNode(false);
      const firstTr = originalTbody.querySelector("tr:first-child").cloneNode(true);
      simplifiedGhost.appendChild(firstTr);
      
      // 设置简化ghost的样式，保持原ghost的视觉风格
      simplifiedGhost.style.backgroundColor = "#cce5ff";
      simplifiedGhost.style.border = "1px solid #99ccff";
      simplifiedGhost.style.height = "auto";

      // 替换默认的ghost元素
      if (this.sortable.ghost) {
        this.sortable.ghost.replaceWith(simplifiedGhost);
        this.sortable.ghost = simplifiedGhost;
      }
    }
  }
};

方案二：使用GhostClass配合尺寸同步 #

如果你更倾向于用CSS控制样式，可以通过ghost-class配置自定义类，然后在拖拽开始时手动触发Sortable更新尺寸计算：

实现步骤： #

1. 配置ghost类并绑定事件：

<draggable
  ref="draggable"
  v-model="tableRows"
  tag="tbody"
  :ghost-class="`compact-ghost`"
  @start="handleDragStart"
>
  <!-- 表格内容 -->
</draggable>

2. 添加CSS隐藏多余行：

.compact-ghost tr:not(:first-child) {
  display: none;
}
.compact-ghost {
  background-color: #cce5ff;
}

3. 在拖拽开始时强制Sortable更新尺寸：

methods: {
  handleDragStart(evt) {
    // 延迟执行，确保CSS样式生效后更新尺寸
    setTimeout(() => {
      // 手动触发拖拽移动逻辑，让Sortable重新计算位置
      this.sortable._onDragMove({ clientY: evt.clientY });
    }, 0);
  }
}

关键说明 #

• 不要直接修改原拖拽元素的尺寸，Sortable在拖拽开始时已经缓存了原元素的offsetHeight，后续的位置计算都会基于这个值。
• 方案一的自定义ghost更稳定，因为完全替换了ghost元素，Sortable会自动基于新元素的尺寸计算位置；方案二需要手动同步，适合简单场景。

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