javascript - 在 React.js 中拖放。如何在 setDragImage 中传递自定义 react 组件

Question

我正在 React.js 中实现拖放。如何在 React.js 中实现 Darg 和 Drop 中传递自定义 react 组件。我想让我的自定义 react 组件作为我的拖动组件的预览图像。如何在 setDragImage 中传递自定义 react 组件.我不想要图像。

onDragStart = (e, index) => {

    this.draggedIndex = index;
    this.draggedItem = this.state.list[index];
    e.dataTransfer.effectAllowed = "move";
    e.dataTransfer.setData("text/html", e.target.parentNode);
    e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
};

预期结果是自定义预览组件。

提前致谢

Answer 1

一直在寻找同样的东西，直到我终于偶然发现了答案。希望这可以帮助某人(TSX):

private onDragStart(e: React.DragEvent) {
    let image: JSX.Element = (<></>); // <== whatever you want here

    var ghost = document.createElement('div');
    ghost.style.transform = "translate(-10000px, -10000px)";
    ghost.style.position = "absolute";
    document.body.appendChild(ghost);
    e.dataTransfer.setDragImage(ghost, 0, 0);

    ReactDOM.render(image, ghost); 
}

(这有点过于简化了，因为您还需要在删除后从 DOM 中删除 ghost)。