关键词：
【中文标题】我怎样才能从 react beautiful dnd 中获得组合来处理我的项目？【英文标题】：How can I get combining from react beautiful dnd to work on my items? 【发布时间】：2021-01-15 21:59:41 【问题描述】：我正在使用 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, 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 设为 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>
【问题讨论】：
【参考方案1】：最后我已经解决了这个问题，并想分享这个，以防有人最终遇到同样的问题。
问题确实出在 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, 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：当存在多个列表时，在一行中拖动内容会从所有行中拖动相同的索引
】react-beautiful-dnd：当存在多个列表时，在一行中拖动内容会从所有行中拖动相同的索引【英文标题】：react-beautiful-dnd:Whenmultiplelistsexists,draggingcontentinonerowwilldragsameindexfromallrows【发布时间】：2020-05-0316:17:00【问题描述】：我有一... 查看详情
更改 react-beautiful-dnd 可拖动点击区域
】更改react-beautiful-dnd可拖动点击区域【英文标题】：Changereact-beautiful-dnddraggableclickarea【发布时间】：2020-08-0412:41:04【问题描述】：我正在使用react-beautiful-dnd找不到任何更改可拖动点击区域的解决方案。当我点击自定义区域（而... 查看详情
使用 react-beautiful-dnd 嵌套拖放
】使用react-beautiful-dnd嵌套拖放【英文标题】：NestedDragandDropwithreact-beautiful-dnd【发布时间】：2019-03-1917:17:44【问题描述】：我正在使用react-beautiful-dnd创建垂直嵌套拖放。我推荐了一些answersingithub我从沙盒中分叉并创建了一个新的... 查看详情
Dragabbale 不会在 react-beautiful-dnd 中移动
】Dragabbale不会在react-beautiful-dnd中移动【英文标题】：Dragabbalewon\'tmoveinreact-beautiful-dnd【发布时间】：2020-07-1416:30:12【问题描述】：我正在尝试在react-beautiful-dnd中构建一个简单的可拖动对象实现，但显然我的可拖动对象不会移动... 查看详情
React-Beautiful-Dnd 找不到带有 Id 的可拖动元素
】React-Beautiful-Dnd找不到带有Id的可拖动元素【英文标题】：React-Beautiful-DndCan\'tFindDraggableElementwithId【发布时间】：2020-12-0414:22:46【问题描述】：我正在尝试复制react-beautiful-dnd教程第4步：重新排序列表。据我所知，我已经复制了... 查看详情
Optimistic React Apollo ui lag with React Beautiful Drag and Drop
】OptimisticReactApollouilagwithReactBeautifulDragandDrop【英文标题】：【发布时间】：2019-02-2022:21:20【问题描述】：我正在尝试创建一个乐观的响应，其中UI立即更新（最小的延迟和更好的用户体验）拖放数据。然而，我遇到的问题是它仍... 查看详情
无法让 React-Beautiful-DND 和 React-Virtualized 一起工作
】无法让React-Beautiful-DND和React-Virtualized一起工作【英文标题】：CannotgetReact-Beautiful-DNDandReact-Virtualizedtoworktogether【发布时间】：2021-05-2512:21:06【问题描述】：伙计们，我实际上已经尝试了几天，但我一直无法弄清楚这一点。我可... 查看详情
React-Beautiful-dnd 元素在 2,3 次尝试后不可拖动
】React-Beautiful-dnd元素在2,3次尝试后不可拖动【英文标题】：React-Beautiful-dndelementnotdraggableafter2,3tries【发布时间】：2020-09-2712:01:04【问题描述】：最初，元素可以从一列拖动到另一列，但在2-3个项目拖动后，某些索引上的项目停... 查看详情
使用 React-Beautiful-DND 拖动时，可拖动 div 给出 100% 的父级
】使用React-Beautiful-DND拖动时，可拖动div给出100%的父级【英文标题】：Draggabledivgiven100%ofparentwhendraggedwithReact-Beautiful-DND【发布时间】：2021-04-1523:28:52【问题描述】：我正在使用react-beautiful-dnd为比赛室的一些评委创建一个简单的分... 查看详情
斯威夫特：我怎样才能从代码中删除出口？
】斯威夫特：我怎样才能从代码中删除出口？【英文标题】：Swift:Howcaniremovetheoutletsfromcode?【发布时间】：2017-10-0505:25:05【问题描述】：我有一个观景高度出口。它设置为55。在tableview中我使用过它。有些地方我需要静态高度，... 查看详情
如何让“react-beautiful-dnd”不触发“react-transition-group”动画？
】如何让“react-beautiful-dnd”不触发“react-transition-group”动画？【英文标题】：HowcanImake`react-beautiful-dnd`nottriggera`react-transition-group`animation?【发布时间】：2020-06-0713:11:46【问题描述】：演示我的问题的视频：https://i.imgur.com/L3laZLc.m... 查看详情
我怎样才能从一个街区提前归还一些东西？
】我怎样才能从一个街区提前归还一些东西？【英文标题】：HowcanIreturnsomethingearlyfromablock?【发布时间】：2011-01-3120:43:10【问题描述】：如果我想做这样的事情：collection.eachdo|i|returnnilifi==3..manylinesofcodehere..end我将如何获得这种效... 查看详情
我怎样才能从类型中获得通用的结构？
】我怎样才能从类型中获得通用的结构？【英文标题】：Howcouldigetstructasgenericfromtype?【发布时间】：2019-12-1213:37:39【问题描述】：您好，我为对象中的搜索类型创建了类型数组，如果对象具有该结构（或组件），则从对象中删除... 查看详情
Beautiful Soup Find - 只获取文本
...内容，因为现在它使用html标记和所有内容打印整行。我怎样才能让它只打印出文本，而不使用正则表达式？importrequestsfrombs4importBeautifulSoupu 查看详情
java示例代码_安卓系统——我怎样才能从沉睡中唤醒手机拍照
java示例代码_安卓系统——我怎样才能从沉睡中唤醒手机拍照 查看详情
我怎样才能从一个套件中只运行一个测试？
】我怎样才能从一个套件中只运行一个测试？【英文标题】：HowcanIrunonlyonetestfromasuite?【发布时间】：2014-09-2407:17:27【问题描述】：我在下面有这个测试类，我只想从中运行一个测试，例如“aboutPage”。有什么想法吗？这就是我... 查看详情
可变变量可以从闭包中访问。我怎样才能解决这个问题？
】可变变量可以从闭包中访问。我怎样才能解决这个问题？【英文标题】：Mutablevariableisaccessiblefromclosure.HowcanIfixthis?【发布时间】：2013-05-1910:39:30【问题描述】：我正在使用Twitter的Typeahead。我遇到了来自Intellij的警告。这导致每... 查看详情
我怎样才能确保我从这个回归生成器中得到正确的结果？
】我怎样才能确保我从这个回归生成器中得到正确的结果？【英文标题】：HowcanIensurethatI\'mgettingthecorrectresultsfromthisregressiongenerator?【发布时间】：2017-09-1503:27:58【问题描述】：我编写了一个简单的脚本来生成和回归随机样本数... 查看详情