问题标签 [react-beautiful-dnd]

我想使用 dnd 或漂亮的 dnd 交换两个数组项我需要帮助

这是我的代码，当我映射它时它会创建两个列，并且在每一列中，它显示 2 个元素，有两个数组，因此它为每个数组创建 2 列我找不到用于交换项目的特定材料它总是从一个中放置一个项目列到其他不交换它们

我想要 1 列，每个元素可以相互交换

期待

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

问题似乎出在 onDragEnd 中，它可以在文档中找到 result.combine (combine) ，但是当它到达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 （尽管没有任何组合！）

我的数据：

带有 onDragEnd 的索引文件

可删除的列 （isCombineEnabled 为 true）

可拖动的任务项目

sortablejs 的自动滚动感觉几乎不起作用。有时它会滞后。我正在开发一个需要平滑滚动的应用程序，类似于它在 react-beautiful-dnd 中的工作方式。当您靠近边缘时，它开始缓慢滚动，当您靠近边缘时，它会加速。感觉很自然。

下面是我们希望它如何工作以及 sortablejs 当前如何工作

反应美丽的 dnd

可排序的js

我从 react-beautiful-dnd 迁移到 sortablejs，因为它不支持树状嵌套列表。但是 sortablejs 的自动滚动并不是我们可以部署给用户的东西，因为它感觉非常有问题，以至于感觉它几乎不能工作，而且它让整个 UX 看起来很糟糕。所以我真的像许多提交有关自动滚动问题的 sortablejs 用户一样被卡住了。

如果您知道如何实现这一点或知道具有良好滚动和嵌套/树状结构支持的不同库，请提出建议。

https://codesandbox.io/s/vanilla-sortablejs-scroll-test-fmch4

快速提问 - 为什么 Typescript 仍然认为它是未定义的？

将下面的代码添加到我的应用程序时，我在线上有 Typescript 错误，draft.splice(result.destination.index, 0, draggedItem);说result.destinationObject 可能未定义。这是部分正确的，因为它的类型如下：DragUpdate.destination?: DraggableLocation | undefined. 但是，我在此函数的最开始进行了检查，因此在给定的行中它永远不会是undefined.

这是带有钩子的 React 应用程序，也使用immer和react-beautiful-dnd.

在此代码框中，您可以看到一个元素树，您可以拖动每个元素，但问题是您可以将每个元素拖放到 spsefec 可放置区域中。

• 我试图添加{...prov.droppableProps}到可拖动的 div 以同时可拖动和可放置，但它没有用。
• 我尝试创建递归多列表（多列），但它返回了太多错误，尽管我坚信这是我问题的解决方案，但也许我做得不对。 代码沙盒

当我尝试react-beautiful-dnd与next.js（或通常与服务器端渲染一起使用）时，在重新排序项目并刷新页面后，我收到此错误：

这（取决于第一个）：

我尝试使用resetServerContext()重置服务器上下文计数器，但它没有按预期工作。

如何让我的待办事项动态化，并可以通过表单添加项目？

这是我的清单：

这个列表有固定的任务，我想让动态的，通过表单添加任务，但我不知道该怎么做！

代码：

在此代码上已经有一个带有一个输入并提交的表单！你能帮我解决这个问题吗？

我想从 react-bootstrap 拖放选项卡，我正在使用 react-beautiful-dnd 来实现它。但由于某种原因，我无法得到它。没有标签出现。

这是我的代码：

这是在没有 DND 的情况下工作的示例：

与免打扰链接：https ://stackblitz.com/edit/react-u1cts7?file=src%2FApp.js

没有免打扰的链接：https ://codesandbox.io/s/pedantic-minsky-7zelb?file=/src/App.js:0-1045

我想实现类似的功能：https ://codesandbox.io/s/mmrp44okvj?file=/index.js:0-2939

请注意，只有“+”按钮之前的选项卡应该是可拖动的。+ 按钮选项卡和最后两个选项卡不应该。

请就解决此问题的方法提出建议。任何帮助表示赞赏。

我有一个具有周期性标题标签的项目列表，可以直观地对项目进行分组。我希望标题在拖动时保持原位。但是，拖动项目下方的所有标题都向上移动（看似）项目的高度。

我怎样才能让标题留在原地？

标题标有它们应该放在之前的项目的索引。

我尝试过使用多个 droppable，但是有两个用于放置项目的插槽（在一个 droppable 的末尾和下一个 droppable 的开头）而不是一个。

知道为什么在 react-beautiful-dnd 中我连续得到“可丢弃：检测到不支持的嵌套滚动容器”。?