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

Question

我尝试交换拖动可拖动元素（在本例中为ul以下）时浏览器使用的默认图像。这是我的代码。我没有收到任何错误-只是不起作用，剩下的是浏览器使用的默认图片。

drag(e) {
  let img = new Image()
  img.src = 'https://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()。我通过在安装上创建图像并将其存储在状态中来处理这个问题：

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