如何在元素上添加drag @ drop到图标的能力？

Question

我有从“ create-react-app XXX”（xxx是项目名称）中获得的简单代码

这是简单的代码：

class App extends Component {
   render() {
      return (
        <div className="App">
          <header className="App-header">
             <h1 className="App-title">Need drag to here the react icon</h1>
          </header>
          <p className="App-intro">
            To get started  <img src={logo} className="App-logo" alt="logo" /> , edit <code>src/App.js</code> and save to reload.
          </p>
        </div>
      );
 }
  }

  export default App;

用户界面如下所示：

我试图在标头=>上添加对reactjs图标的还原功能，这意味着我试图将其拖动到屏幕的黑色部分

该怎么做？ 我找不到简单的方法

Answer 1

使用html5拖放api应该非常容易。您必须将draggable属性添加到图标上，因为要拖动它，然后可以使用Drag events在黑色部分上实现图标的拖放。在此处详细了解：drag and drop。还要检查this，尽管此实现尚在进行中，但您会有所了解。