如何解决我如何才能将反应灵敏的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 } }));
}
}
随时欢迎对我的回答进行任何补充或更正。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。