如何使用 React.js 自定义拖放图像

Question

我正在 React.js 中实现拖放效果。我如何使用自定义 React 组件或片段（在启动拖动时不一定存在于 DOM 中）作为拖动图像传递给

setDragImage

，而不是被拖动项目的静态图像？

例如：

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(??????);
};

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

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

）。