无法在同一个 Droppable react-beautiful-dnd 中拖放组件

Question

发生的情况是，当我在一列中有多个项目并尝试拖动其中一个时，只显示一个，根据发现的经验教训 here 我应该可以在其中移动项目同一列，但不能。在 React 开发工具中状态和 r-b-dnd id 看起来不错，但我知道什么？我只是个菜鸟。到目前为止，这是我 onDragEnd 中的内容。

  onDragEnd = result => {
    const { destination, source, draggableId } = result;
    if (!destination) return;
    if (
      destination.droppableId === source.droppableId &&
      destination.index === source.index
    ) {
      return;
    }
    let start = this.state.list[source.droppableId];
    let finish = this.state.list[destination.droppableId];
    if (start === finish) {
      let updatedList = this.state.list.map(obj => {
        if (obj.id === source.droppableId) {
          obj.cards.splice(source.index, 1);
          obj.cards.splice(destination.index, 0, draggableId);
        }
        return obj;
      });
      this.setState({ list: updatedList });
    }

并且可以找到我的应用程序 here。谢谢

Answer 1

在您的代码中，在 onDragEnd 中您有这段代码，这就是为什么您不能在同一列表中重新排列项目的原因。当您在同一个列表中移动项目时，源和目标 Droppable ID 将相同。

if (destination.droppableId === source.droppableId && destination.index === source.index) {
  console.log("they're equal");
  return;
}

在您的组件上，列表中所有项目的可拖动 ID 都相同。每个可拖动项都应该是唯一的。

const Card = props => {
  return (
    // This is NOT unique. This should be dynamic, we should use idx probably.
    <Draggable draggableId={props.col + "-" + props.color} index={props.idx}>
      {provided => (

更正这两个后，我可以移动项目：https://codesandbox.io/s/r5z28w85yo。希望这对您有所帮助。

无法在同一个 Droppable react-beautiful-dnd 中拖放组件

Unable to drag and drop Components in same Droppable react-beautiful-dnd

javascript

reactjs

react-beautiful-dnd