Javascript 反应DragAndDrop-如何使项目在放置到其他项目上后相互更改？

我第一次尝试DragAndDrop时，我需要一些帮助。我确实将物品拖放到空容器中，但我需要使这些物品在拖放到其他物品后改变位置。 你能帮我怎么做吗

我在sandbox上的代码如下：

蓝色为容器，其他为物品

class Todo extends Component {
  render() {
    return (
      <div className={"d-flex"}>
        <div className={"d-flex flex-column"}>
          <ItemSlot id={1}> </ItemSlot>
          <ItemSlot id={2}> </ItemSlot>
          <ItemSlot id={3}> </ItemSlot>
        </div>
        <div className={"d-flex flex-column ml-3"}>
          <ItemSlot id={4}>
            <Item id={"i1"} color={"red"} />
          </ItemSlot>
          <ItemSlot id={5}>
            <Item id={"i2"} color={"purple"} />
          </ItemSlot>
          <ItemSlot id={3} color={"green"}>
            <Item id={"i3"} color={"green"} />
          </ItemSlot>
        </div>
      </div>
    );
  }
}

class ItemSlot extends Component {
  drop = e => {
    e.preventDefault();
    const uniqueKey = e.dataTransfer.getData("transfer");
    e.target.appendChild(document.getElementById(uniqueKey));
  };

  allowDrop = e => {
    e.preventDefault();
  };

  render() {
    return (
      <div
        id={this.props.id}
        onDrop={this.drop}
        onDragOver={this.allowDrop}
        style={{
          width: "200px",
          height: "50px",
          backgroundColor: "blue",
          margin: 20 + "px"
        }}
      >
        {this.props.children}
      </div>
    );
  }
}

class Item extends Component {
  drag = e => {
    e.dataTransfer.setData("transfer", this.props.id);
  };

  allowToDrop = e => {
    e.stopPropagation();
  };

  render() {
    return (
      <div
        id={this.props.id}
        draggable={"true"}
        onDragStart={this.drag}
        onDragOver={this.allowToDrop}
        style={{
          width: "200px",
          height: "50px",
          backgroundColor: `${this.props.color}`
        }}
      >
        {this.props.children}
      </div>
    );
  }
}

类Todo扩展组件{
render（）{
返回(
);
}
}
类ItemSlot扩展组件{
下降=e=>{
e、 预防默认值（）；
const uniqueKey=e.dataTransfer.getData（“transfer”）；
e、 target.appendChild（document.getElementById（uniqueKey））；
};
allowDrop=e=>{
e、 预防默认值（）；
};
render（）{
返回(
{this.props.children}
);
}
}
类项扩展组件{
拖动=e=>{
e、 dataTransfer.setData（“transfer”，this.props.id）；
};
allowToDrop=e=>{
e、 停止传播（）；
};
render（）{
返回(
{this.props.children}
);
}
}

例如，位置1上有紫色，位置2上有红色。我把紫色扔到第二位。红色应自动转到位置1。这就是我需要做的：）谢谢

---

或者在更糟糕的情况下，如果在将item1放到其他item2上之后，item2将在其启动时返回到位置，那么就足够了。但第一种选择更好。

我经常不鼓励过度使用库，但HTML5拖放规范一直有点像火车残骸，有两种非常流行（经过战斗测试）且功能丰富的React解决方案可供您使用：对于我的案例，请推荐我些什么？我在每个项目后面都有一个对象，在拖动到插槽后，我必须更新这个对象的属性。或者我会用哪一个无关紧要？无论如何，thx for Recomendations我通常不鼓励过度使用库，但HTML5拖放规范一直有点像火车残骸，有两种非常流行（经过战斗测试）且功能丰富的React解决方案可供您使用：请您为我的案例推荐什么？我在每个项目后面都有一个对象，在拖动到插槽后，我必须更新这个对象的属性。或者我会用哪一个无关紧要？无论如何，谢谢推荐