如何通过将相应的 React 组件拖放到彼此上来链接不同表中的两个数据库行？

数据库 数据库包含两个表。 Activities(teamId) 是引用Teams(id) 的外键，因此每个活动可以分配给一个团队，每个团队可以进行多个活动。 活动：id、描述、teamId、状态 团队：id、leaderName、numMembers

网页 该网页有两个框，一个包含显示描述、teamId 和状态的活动列表，另一个框包含带有 leaderName 和 numMembers 的团队列表。每个框都是一个 React 组件，任一列表中的每一行也是一个 React 组件。

问题 我如何对列表项组件进行编程，以便我可以将团队拖放到活动上或将活动拖放到团队上以在数据库中将它们链接在一起？删除列表项后，它链接数据库中的两个项目（通过设置活动的 teamId），将列表项捕捉回其原始位置，并更新屏幕上可见的活动组件的 teamId。

我知道如何创建组件，并且我看过很多关于如何重新排序列表等的指南，但我想链接两个不同列表中的两个项目。