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

Posted 2023-03-05

【中文标题】React.js - 可拖动元素上的 setDragImage

【英文标题】：React.js - setDragImage on draggable element

【发布时间】：2017-12-16 13:23:38

【问题描述】：

我正在尝试更换浏览器在拖动可拖动元素时使用的默认图像（在本例中为下面的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>
  )

【参考方案1】：

调用setDragImage() 时，图像尚未加载。我通过在 mount 上创建图像并将其存储在 state 中来处理这个问题：

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

【讨论】：

所以等等，您必须在调用drag 之前创建拖动图像，并为每个可拖动项目执行此操作，而不管它是否实际被拖动？因此，如果我有数百个可拖动元素，我还必须在 RAM 中为碰巧被拖动的任何一个元素提供一个重影图像？这不可能。