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