dragPreviewRender 在 RTL 页面上不起作用

Question

minop1205/react-dnd-treeview是一个可拖放的基于react的树视图组件。当你拖拽一个节点并希望在RTL页面上看到它的预览时，在React DnD TreeView中使用dragPreviewRender组件是行不通的。

Answer 1

我不得不在

node_modules@minoru react-dnd-treeview dist index.js

在线835:

var x = offset.x, y = offset.y;

并将其改为:

var x = offset.x - window.innerWidth, y = offset.y;

Answer 2

我通过使用绝对定位修复了这个问题:

<Tree
...
dragPreviewRender={(monitorProps) => (
<div style={{
zIndex: 9999,
maxWidth: 'max-content',
position: 'absolute',
left: 0,
}}>
{monitorProps.item.text}
</div>
)}
....
/>

这会使预览元素从流中出来，并让我们对其位置有更多的控制。通过使用left: 0，我们将覆盖之前由库设置的位置，并使其在RTL网站上正确显示。