Angular v7.3.8 CDK拖拽功能失效：横向列表无法拖拽求助

我之前也碰到过Angular 7 CDK拖拽功能不生效的情况，结合你提供的代码，咱们一步步排查和解决：

1. 首要检查：缺失基础拖拽样式 #

Angular CDK的拖拽组件依赖基础样式来触发交互和显示正确布局，你的代码里没提到样式文件的内容，这很可能是核心问题。给.example-list和.example-box添加以下必要样式：

.example-list {
  display: flex; /* 横向布局必须的flex属性 */
  padding: 0;
  gap: 12px; /* 列表项之间的间距 */
}

.example-box {
  padding: 16px;
  background: #f5f5f5;
  border-radius: 4px;
  cursor: move; /* 提示可拖拽 */
  min-width: 120px; /* 保证列表项有足够宽度 */
}

.cdk-drag-preview {
  box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* 拖拽时的预览阴影 */
}

.cdk-drag-placeholder {
  opacity: 0.5; /* 拖拽时占位符的透明度 */
}

2. 确认CDK版本与Angular版本匹配 #

Angular 7.3.8对应的CDK版本必须是7.3.x，版本不匹配会导致兼容性问题。打开你的package.json，检查@angular/cdk的版本号，如果不一致，运行以下命令更新：

npm install @angular/cdk@7.3.8 --save

3. 二次验证模块导入正确性 #

虽然你提到已经导入DragDropModule，但请确认导入路径完全正确：

// app.module.ts
import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
  imports: [
    // ...其他模块
    DragDropModule
  ]
})
export class AppModule { }

4. 检查是否有事件阻止逻辑 #

如果页面中有全局的mousedown、touchstart事件监听，并且调用了event.preventDefault()，会直接阻止CDK的拖拽触发逻辑。检查你的全局脚本、组件内的事件监听，移除这类阻止拖拽的代码。

修正后的完整示例参考 #

你的HTML和TS代码本身逻辑没问题，补充样式后应该就能正常工作。这里再贴一遍完整的关键代码：

test.page.html #

<div cdkDropList cdkDropListOrientation="horizontal" class="example-list" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let answer of answers" cdkDrag>{{answer}}</div>
</div>

test.page.ts #

import { Component, OnInit } from '@angular/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-test',
  templateUrl: './test.page.html',
  styleUrls: ['./test.page.css'],
})
export class TestPage implements OnInit {
  answers = ['选项1', '选项2', '选项3', '选项4']; // 示例数据

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.answers, event.previousIndex, event.currentIndex);
  }

  ngOnInit() {}
}

按照上面的步骤排查后，你的横向拖拽列表应该就能正常工作了。

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