我刚好折腾过vuedraggable这类看板的样式定制，针对你要的两个需求，梳理下关键的CSS类和配置要点：

1. 拖拽时移动卡片本身而非阴影副本 #

默认情况下，vuedraggable（基于Sortable.js）在拖拽时，会给正在拖拽的原元素添加sortable-drag类，同时在原位置生成一个占位符（sortable-ghost）。如果看起来像“阴影副本”，大概率是默认样式里sortable-drag被设置了半透明，或者你不小心开启了克隆模式。

步骤： #

• 先确认克隆模式是否开启：如果你的group配置里pull: 'clone'，改成pull: 'move'或true，这样拖拽的就是原卡片而非克隆副本：

  <draggable
    :group="{ name: 'kanban', pull: 'move', put: true }"
  >
    <!-- 你的卡片列表 -->
  </draggable>
  

• 然后修改sortable-drag的样式，去掉默认的半透明效果，让拖拽的原卡片完全可见：

  .sortable-drag {
    opacity: 1 !important; /* 覆盖默认的半透明 */
    z-index: 9999; /* 确保拖拽时在所有元素上层 */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); /* 可选：添加阴影提升拖拽质感 */
    cursor: grabbing;
  }
  

2. 自定义放置占位符样式 #

放置时的占位符（拖拽到目标区域时显示的位置提示）对应的默认CSS类是sortable-placeholder，你可以直接修改这个类的样式来定制：

.sortable-placeholder {
  /* 自定义背景色和边框 */
  background-color: rgba(76, 175, 80, 0.15);
  border: 2px dashed #4caf50;
  border-radius: 6px;
  /* 保持和卡片一致的间距，避免布局跳动 */
  margin: 8px 0;
  /* 设置和卡片相同的高度，或者用min-height自适应 */
  min-height: 90px;
}

如果想更灵活，也可以通过vuedraggable的placeholder-class prop自定义类名，比如：

<draggable placeholder-class="kanban-placeholder">
</draggable>

然后对应修改.kanban-placeholder的样式即可。

额外提示 #

如果原位置的占位符（sortable-ghost）样式也需要调整，比如让它更明显，同样可以修改这个类：

.sortable-ghost {
  opacity: 0.3;
  background-color: rgba(0, 0, 0, 0.05);
}

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