在使用React DND删除的同时,如何使用自定义拖动预览来隐藏元素



我正在使用React DND来处理React App中的拖放和删除。我正在使用触摸后端。在此实现中,我使用自定义拖放预览。在拖动时,我通过将其最大高点动画为0来隐藏"被拖动"的元素。自定义拖放预览显示在用户拖动时显示。如果用户将元素放在不允许的区域中,则该项目"被拖动"动画回到其原始高度。这很好。

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

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

最大高度动画由isDraggingtrue时添加和删除的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节点的副本,以便即使在拖动过程中添加和删除元素时,它仍然保留了该组件。

相关内容

  • 没有找到相关文章