正如您在 GIF 中看到的那样，在对列表中的项目进行排序时，占位符元素似乎与其他元素重叠。我的代码逻辑与示例相当。

灰色背景是一个绝对定位的元素。

这是我的实际代码：

JSFiddle：https ://jsfiddle.net/40vpaLj5/

我用谷歌搜索了一些问题，我发现唯一消失的相关问题是人们在模式上使用它时，他们谈到设置 z-index 来修复它。反正我试了还是一无所获。我怎样才能解决这个问题？

我在 React.js 中开发了一个项目，我在其中使用react-sortable-hoc插件来拖动元素。我想拖动带有输入的部分。

在拖动它之前看起来不错：

如果我拖动元素，它看起来像这样：

因此，当我拖动它时，输入、文本区域和所有表单元素中的样式都会丢失。

你能帮我为什么样式丢失以及如何修复它吗？

谢谢你。

我想将react-sortable-hoc与react-virtualized 的 Grid一起使用，其中行是可排序的。我不能使用列表，因为我有多个列，我不能将它与表格一起使用，因为我有太多列，因此需要水平滚动。

我面临的问题是 Grid 没有rowRenderer像 Table 或 List 那样的回调（它只有cellRendererand cellRenderer），因此我不知道要环绕什么SortableElement。

我会很感激这种用法的任何想法或例子？

我正在尝试使一个功能正常工作，该功能可以删除使用 React Dropzone 和 react-sortable 上传的图像。

我有 dropzone 工作，并且排序工作，但由于某种原因，我在可排序项目上拥有的从数组中删除该特定项目的功能不起作用。onClick 事件似乎没有调用该函数。

我的代码如下。

我想将react-sortable-hoc与react-virtualized 的 MultiGrid一起使用。更具体地说，我希望能够对右下方网格中的行进行排序。

第一次尝试

我正在使用创建一个 SortableMultiGrid

但是当这个安装我得到一个错误，这个消息

无法读取未定义的属性“ownerDocument”

该错误源自SortableContainer的 componentDidMount 方法。

第二次尝试

我发现它SortableContainer有一个getContainer属性，它在引发错误的代码上方被调用：

返回可滚动容器元素的可选函数。此属性默认为 SortableContainer 元素本身或（如果 useWindowAsScrollContainer 为 true）窗口。使用此函数来指定自定义容器对象（例如，这对于与某些 3rd 方组件（例如 FlexTable）集成很有用）。这个函数被传递了一个参数（wrappedInstance React 元素），它应该返回一个 DOM 元素。

它是用 MultiGrid 组件实例调用的，但是当我尝试从中获取 DOM 节点时，它返回null：

我怀疑这可能是由尚未安装的 MultiGrid 组件引起的，我怀疑我所看到的与https://github.com/clauderic/react-sortable-hoc/issues/135有关。

第三次尝试 - 有效，但这是一个黑客

我想我可能会通过首先返回不会引发错误的东西来欺骗 SortableContainer，然后当可以确定对多网格内右下角网格的引用时，我可以再次调用 SortableContainer 的 componentDidMount。

这实际上似乎有效！但是我仍然想知道是否有人对如何以更优雅的方式实现这一点或两个库中的任何一个应该如何更改以解决此问题有想法。

代码沙盒

我制作了两个沙箱来说明这一点：

1. 第一个是功能性可排序网格（我没有实现要持久化的最终状态）：https ://codesandbox.io/s/710kxo247x 。我实现了一个渲染单元格行的“rowRangeRenderer”（注意它在滚动时没有完全优化缓存），以替换 defaultCellRangeRenderer 并允许由 SortableElement HOC 包装行。
2. 尝试使用 MultiGrid 而不是 Grid - 显示上述错误：https ://codesandbox.io/s/1z390ow44
3. 第三次尝试 - 它有点工作，但它是一个黑客https://codesandbox.io/s/pprwo6m350

如何将我functional的组件更改为class组件我的代码如下

我尝试更改此代码，但对我不起作用。

我正在尝试使用 React JS 开发一个相当简单的电子邮件模板创建器。我使用“react-sortable-hoc”库来处理页面上元素的排序。

目标是允许用户创建“行”，重新排列行，并且在每一行内，有多个“列”，可以包含图像、文本框等组件......

但是我一直遇到与可排序库相同的问题。向上或向下拖动时，表单字段无法保持自己的“状态”。React JS 中组件的状态在可拖动组件中时似乎丢失了。我在使用 JQuery UI 的 Sortable 时遇到过类似的问题，但它需要一个同样荒谬的解决方案。是否经常发现表单字段非常难以重新排列？

作为“概念证明”，我使用了一个复杂的 JSON 对象，该对象将所有信息存储在 Letter.js 组件中，并将其作为 Props 传递，然后传递给每个组件。但正如你所知道的，这变得很麻烦。

下面是一个处理 JSON 对象和行排序的 Letter 组件示例：

这是行的一个例子：

最后，这就是 Text.js 的样子

因此，我一直不得不将荒谬的参数传递给 onChange 函数和其他函数，以确保在排序和编辑时保持状态。那么，我应该如何处理呢？我不希望Letter.js（基本上是 App.js）来处理我的所有数据处理。我希望每个组件都处理它自己的。我希望 Text.js 处理其文本的 onChange 效果。但我只是看不到将所有东西都作为道具传递下去的方法。

我一直在尝试使反应虚拟化的 MultiGrid 可排序。最后，我调整了 MultiGrid 的 Grids 以获得我想要的效果。但是，在排序时，行不能正确转换并且总是移动到极端（最上面或最下面）。这是我到目前为止所做的代码沙盒演示：https ://codesandbox.io/s/5kl4z8olrn

我需要帮助修复行转换并使其正确排序。

在有人链接一些无用的示例之前，我进行了搜索，但没有找到任何实际显示 react-sortable-hoc 组件的内容。最接近的解决方案是Using react-sortable-hoc with react-virtualized Grid。

我需要可排序的拖放组件，以便能够在用户从另一个容器单击按钮时使用新值重新呈现，并且仍然保留拖放功能。例如，如果列表首先包含 [a, b, c]，我需要它在用户单击将列表重新呈现为 [d, e, f, g] 的按钮时仍然有效。

我遇到了同样的问题react-sortable-hoc，react-beautiful-dnd还有其他一些问题。所有这些库都使用数组来填充它们的拖放列表组件，通常this.state.items在基本示例中命名。他们利用一个被调用的函数onSortEnd来处理项目的重新排列。react-sortable-hoc 的基本代码示例，其中包括我在 render() 中的更新 this.state.items 如下：

一开始，一切都可以通过拖放正常工作。但是，如果我更改items[]in的值render()，新列表会正确呈现。但是拖放失败。看起来它在拖动时会起作用；所选元素移动，目标位置看起来会接受它，但 onMouseRelease 一切都会恢复到原始位置。

我在数组移动后放置了 console.log 命令，以确认列表中的列表是否items根据需要重新排序。它只是不会在视觉上发生。拖放时没有控制台错误。

任何帮助，将不胜感激。