0

我正在使用 React DnD 来处理 React 应用程序中的拖放操作。我正在使用触摸后端。在这个实现中,我使用了自定义拖动预览。拖动时,我通过将其最大高度设置为 0 来隐藏“被拖动”的元素。自定义拖动预览在用户拖动时显示。如果用户将元素放在不允许的区域中,则“被拖动”的项目将动画回其原始高度。这很好。

当项目被删除时,我发送一个 redux 操作,重新排序项目列表并将先前拖动的元素放入其新位置。

但是,在 DOM 更新并在其新位置为项目设置动画之前,拖动的项目会在其当前位置闪烁。

isDragging最大高度动画由在is时添加和删除的 CSS 类控制true

我浏览了 React DnD 文档和示例(通常非常详尽),并查看了其他一些使用 React DnD 的开源项目,但似乎找不到解决方案。我假设我错过了一些简单的东西,比如我可以通过的道具。本质上,我想isDragging一直true等到放置操作完成,或者能够在endDrag可拖动目标上的方法或可放置目标drop上的函数中更新道具。

我可以使用 vanilla javascript 来更新方法的classList内部endDrag,但如果可能的话,我更喜欢使用 React 工具。

有没有人遇到过这个问题?

4

1 回答 1

0

我可以通过修复在 React 中卸载 DOM 节点时停止触摸事件的已知问题来解决此问题。

https://github.com/yahoo/react-dnd-touch-backend/issues/31

在这个解决方案中,您创建了一个附加了触摸事件的 DOM 节点的副本,这样即使 React 卸载组件,因为在拖动过程中添加和删除了元素,它仍然存在。

于 2017-03-07T02:36:45.397 回答