You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

拖放条目时cdkDropListDropped事件未触发,如何实现不删原列表的拖拽

Angular CDK 拖拽复制功能问题排查

导致cdkDropListDropped事件不触发、拖拽复制效果不生效的常见问题点如下:

  • 首先确认你当前组件所在的NgModule已经正确导入了DragDropModule,所有CDK拖拽相关的指令和事件都依赖该模块生效
  • 检查原列表和目标列表都已经添加了cdkDropList指令,且通过cdkDropListConnectedTo属性完成双向关联,只有在已关联的拖拽列表之间完成的拖拽操作才会触发dropped事件
  • 确认每个可拖拽条目都绑定了cdkDrag指令,且通过[cdkDragData]属性正确传递了当前条目对应的源数据

要实现拖拽后保留原列表条目,不要在dropped事件回调中调用transferArrayItem方法,直接取event.item.data的值手动插入到目标列表数组即可,不需要修改原列表的数组内容

内容的提问来源于stack exchange,提问作者Purushothaman

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.06 06:27:04