dragPreviewRender 在 RTL 页面上不起作用

Question

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

Answer 1

我必须修复它：

node_modules@minoru eact-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 网站上正确显示。