cdkDragPlaceholder在水平拖拽场景中失效，寻求解决方法

• 核心问题：你没给cdkDropList指定水平方向属性，默认拖拽逻辑是为垂直流设计的，水平场景下必须明确告知CDK布局方向。
• 修正步骤：

1. 给拖拽容器添加[cdkDropListOrientation]="'horizontal'"属性
2. 确保容器使用水平布局（比如flex row）
3. 让占位符尺寸匹配拖拽元素

修改后的完整代码示例 #

HTML部分：

<div cdkDropList class="example-list" [cdkDropListOrientation]="'horizontal'">
  <div class="example-box" *ngFor="let timePeriod of timePeriods" cdkDrag>
    <div *cdkDragPlaceholder class="example-custom-placeholder"></div>
    {{timePeriod}}
  </div>
</div>

CSS部分：

/* 水平排列的拖拽容器 */
.example-list {
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 10px;
}

/* 拖拽元素样式 */
.example-box {
  width: 120px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background: #fff;
  border: 1px solid #ddd;
}

/* 自定义占位符，尺寸和拖拽元素一致 */
.example-custom-placeholder {
  background: #f0f0f0;
  border: dotted 3px #999;
  width: 120px;
  height: 60px;
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

关键说明 #

• cdkDropListOrientation="horizontal"是核心：这个属性会让CDK调整拖拽时的位置计算逻辑，包括占位符的偏移和排列方向。
• 占位符尺寸必须匹配：如果用min-width/min-height，水平拖拽时可能出现占位符宽度不足的问题，直接设置和拖拽元素一致的宽高更可靠。
• 容器布局要统一：如果不用flex，用inline-block的话，要给容器加white-space: nowrap防止元素换行，同时占位符也要设置display: inline-block。

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