我怎样才能将 react beautiful dnd 结合起来处理我的项目？

Question

我正在使用 react beautiful dnd 并创建了 3 列列表项。我想添加合并项目的功能。我已经阅读了文档，但似乎仍然无法弄清楚为什么它不起作用。

问题好像是在onDragEnd，跟文档里一样可以找到result.combine (combine)，但是好像不是true 当它到达 if 语句 时。我忽略了什么吗？有人可以向我解释发生了什么，为什么它不起作用吗？

提前致谢！

我用过的资源：

我的数据：

const initialData = {
  tasks: {
    'task-1': { id: 'task-1', content: 'task-1' },
    'task-2': { id: 'task-2', content: 'task-2' },
    'task-3': { id: 'task-3', content: 'task-3' },
  },
  columns: {
    'column-1': {
      id: 'column-1',
      title: 'column-1',
      taskIds: ['task-1', 'task-2'],
    },
    'column-2': {
      id: 'column-2',
      title: 'column-2',
      taskIds: [],
    },
    'column-3': {
      id: 'column-3',
      title: 'column-3',
      taskIds: ['task-3'],
    },
  },
  columnOrder: ['column-1', 'column-2', 'column-3'],
};

export default initialData;

带onDragEnd的索引文件

const onDragEnd = result => {
    const { destination, source, draggableId, combine } = result;

    //console.log(`drag: ${combine.draggableId} drop: ${combine.droppableId}`);

    if (!destination) {
      return; // not dropped in a known destination
    }
    if (destination.draggableId === source.droppableId && destination.index === source.index) {
      return; // dropped in same location
    }

    const start = state.columns[source.droppableId]; //get selected column
    const finish = state.columns[destination.droppableId]; //get new selected column

    if (combine) { 

      //console.log(`drag: ${combine.draggableId} drop: ${combine.droppableId}`); 

      const combineTaskIds = Array.from(start.taskIds); 
      combineTaskIds.splice(source.index, 1); 
      const newColumn = {
        ...start,
        taskIds: combineTaskIds,
      }; 

      setState(prevState => ({ ...prevState, columns: { ...prevState.columns, [newColumn.id]: newColumn } }));
    }

    if (start === finish) { //move in same column
      const newTaskIds = Array.from(start.taskIds);
      newTaskIds.splice(source.index, 1); 
      newTaskIds.splice(destination.index, 0, draggableId); 

      const newColumn = {
        ...start,
        taskIds: newTaskIds,
      }; // create new column with new tasks

      setState(prevState => ({ ...prevState, columns: { ...prevState.columns, [newColumn.id]: newColumn } }));
    }

    if (start !== finish) { 
      const startTaskIds = Array.from(start.taskIds);
      startTaskIds.splice(source.index, 1); 
      const newStart = {
        ...start,
        taskIds: startTaskIds,
      };

      const finishTaskIds = Array.from(finish.taskIds);
      finishTaskIds.splice(destination.index, 0, draggableId); 
      const newFinish = {
        ...finish,
        taskIds: finishTaskIds,
      };

      setState(prevState => ({ ...prevState, columns: { ...prevState.columns, [newStart.id]: newStart, [newFinish.id]: newFinish } }));
    }
  }

return <DragDropContext onDragEnd={onDragEnd} >
    <Container>
      {
        state.columnOrder.map(columnId => {
          const column = state.columns[columnId];
          const tasks = column.taskIds.map(taskId => state.tasks[taskId]);

          return <Column key={column.id} column={column} tasks={tasks} />;
        })
      }
    </Container>
  </DragDropContext >

可删除列 （isCombineEnabled 为真）

  <Container>
      <List dense>
        <ListItemText primary={props.column.title} />
        <Droppable droppableId={props.column.id} isCombineEnabled>
          {(provided, snapshot) => (
            <ListItem
              {...provided.droppableProps}
              innerRef={provided.innerRef}
              isDraggingOver={snapshot.isDraggingOver}
              button>
              {props.tasks.map((task, index) => <Task key={task.id} task={task} index={index} />)}
              {provided.placeholder}
            </ListItem>
          )}
        </Droppable>
      </List>
    </Container>

可拖动任务项

<Draggable draggableId={props.task.id} index={props.index}>
      {(provided, snapshot) => (
        <Container
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          innerRef={provided.innerRef}
          isDragging={snapshot.isDragging}
        >
          {props.task.content}
        </Container>
      )}
    </Draggable>

Answer 1

我终于解决了这个问题并想分享这个以防有人遇到同样的问题。

问题确实在到达合并条件之前的onDragEnd。 const finish 需要根据用途进行更改，因为它会有一个或另一个。组合或目的地。

    const onDragEnd = result => {
    const { destination, source, draggableId, combine } = result;

  if (!combine && !destination) {
      return; // not dropped in a known destination
    }
    if (!combine && destination.draggableId === source.droppableId && destination.index === source.index) {
      return; // dropped in same location
    }

    const start = state.columns[source.droppableId]; //get selected column
    const finish = combine ? state.columns[combine.droppableId] : state.columns[destination.droppableId]; //get new selected column

    if (combine) {
      //just removing the dragging item
      const combineTaskIds = Array.from(start.taskIds); //create new array with current columns taskids 
      combineTaskIds.splice(source.index, 1); // from this index we want to remove 1 item
      const newColumn = {
        ...start,
        taskIds: combineTaskIds,
      }; // create new column with new tasks

      setState(prevState => ({ ...prevState, columns: { ...prevState.columns, [newColumn.id]: newColumn } }));
    }

    if (start === finish) { //move in same column
      const newTaskIds = Array.from(start.taskIds);
      newTaskIds.splice(source.index, 1); // from this index we want to remove 1 item
      newTaskIds.splice(destination.index, 0, draggableId); // from this index we want to add the draggable item

      const newColumn = {
        ...start,
        taskIds: newTaskIds,
      }; // create new column with new tasks

      setState(prevState => ({ ...prevState, columns: { ...prevState.columns, [newColumn.id]: newColumn } }));
    }

    if (start !== finish) { //move to different column
      const startTaskIds = Array.from(start.taskIds);
      startTaskIds.splice(source.index, 1); //remove item from index
      const newStart = {
        ...start,
        taskIds: startTaskIds,
      };

      const finishTaskIds = Array.from(finish.taskIds);
      finishTaskIds.splice(destination.index, 0, draggableId); // add draggable to index
      const newFinish = {
        ...finish,
        taskIds: finishTaskIds,
      };

      setState(prevState => ({ ...prevState, columns: { ...prevState.columns, [newStart.id]: newStart, [newFinish.id]: newFinish } }));
    }
  }

随时欢迎对我的答案进行任何补充或更正。

我怎样才能将 react beautiful dnd 结合起来处理我的项目？

How can I get combining from react beautiful dnd to work on my items?

listitem

col

combinatorics

reactjs

react-beautiful-dnd