我已经在这个问题上苦思冥想了相当长的时间。我想要实现的是具有恒定长度的两个连接的拖放列表。这意味着,如果我将一个元素从一个列表移动到另一个列表,另一个列表会增加一个项目。当然,在cdkDropListDropped事件期间实现这一点是微不足道的,但我希望它在拖动项目到列表上时立即发生。
我的大多数尝试都涉及使用cdkDropListEntered事件来尝试:
1. 尝试简单地移动数据数组中的项目:
这导致了以下类型的错误:
第三种尝试使用 Renderer2 移动 DOM 元素本身(并保留数据不变)。
有没有办法实现我想要的效果?这里这个精美的绘画帮助解释了我想要实现的效果。
我的大多数尝试都涉及使用cdkDropListEntered事件来尝试:
1. 尝试简单地移动数据数组中的项目:
public enter(list: number, event: CdkDragEnter<User[]>) {
if (list === 0) {
let data = this.schedule.responsible.pop();
this.schedule.queue.unshift(data);
} else {
let data = this.schedule.queue.shift();
this.schedule.responsible.push(data);
}
}
这导致了以下类型的错误:
第二种尝试使用core.js:6185 ERROR DOMException:未能在此节点的子级中找到要插入新节点的节点,因此无法执行“insertBefore”
CdkDropList
的 addItem()
、removeItem()
和 getSortedItems()
。这导致类似的问题。第三种尝试使用 Renderer2 移动 DOM 元素本身(并保留数据不变)。
有没有办法实现我想要的效果?这里这个精美的绘画帮助解释了我想要实现的效果。