我正在使用React DND来处理React App中的拖放和删除。我正在使用触摸后端。在此实现中,我使用自定义拖放预览。在拖动时,我通过将其最大高点动画为0来隐藏"被拖动"的元素。自定义拖放预览显示在用户拖动时显示。如果用户将元素放在不允许的区域中,则该项目"被拖动"动画回到其原始高度。这很好。
删除项目时,我发送了一个redux操作,将项目列表重新定位,并将先前拖动的元素放入其新位置。
但是,在DOM更新之前,拖动的项目在当前位置闪烁并在其新位置进行动画。
最大高度动画由isDragging
为true
时添加和删除的CSS类控制。
我已经搜寻了React DND文档和示例(通常非常彻底),并查看了其他一些使用React DND但似乎无法找到解决方案的开源项目。我假设我缺少一些简单的东西,例如我可以通过的道具。从本质上讲,我希望isDragging
保持true
,直到完成下降动作或能够在可拖动目标上的endDrag
方法中更新Prop,或者在可丢下目标上的drop
功能。
我可以使用vanilla javascript更新endDrag
方法内的classList
,但希望在可能的情况下使用React工具。
有人遇到了这个问题吗?
我能够通过在react中卸下DOM节点时解决已知问题来解决此问题。
https://github.com/yahoo/react-dnd-touch-backend/issues/31
在此解决方案中,您可以创建一个附上触摸事件的DOM节点的副本,以便即使在拖动过程中添加和删除元素时,它仍然保留了该组件。