我如何才能将反应灵敏的dnd结合到我的物品上？

问题描述

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

问题似乎出在onDragEnd上，它可以像文档中那样找到result.combine （combine），但是当它看起来不是 true 时，它进入 if语句。我在俯视什么吗？有人可以告诉我发生了什么，为什么不起作用？

提前谢谢！

我使用过的资源

• https://react-beautiful-dnd.netlify.app/?path=/story/board--with-combining
• https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/combining.md
• https://egghead.io/lessons/react-move-items-between-columns-with-react-beautiful-dnd-using-ondragend （虽然不能合并！）

我的数据：

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,draggableId); 

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

      setState(prevstate => ({ ...prevstate,[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,draggableId); 
      const newFinish = {
        ...finish,taskIds: finishTaskIds,};

      setState(prevstate => ({ ...prevstate,[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为true）

  <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>

解决方法

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

问题确实出在 onDragEnd 之前，然后才进入了 combine 的条件。 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,draggableId); // from this index we want to add the draggable item

      const newColumn = {
        ...start,taskIds: newTaskIds,[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,draggableId); // add draggable to index
      const newFinish = {
        ...finish,taskIds: finishTaskIds,};

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

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