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