代码之家 › 专栏 › 技术社区 › user2212461

React应用程序中未激发OnDrop事件

drag-and-drop reactjs javascript

user2212461 · 技术社区 · 6 年前

我要从图像拖动到这样的范围:

从这里拖动

<img src={img_src} draggable='true' onDragStart={this.dragStartHandler(idx)}/>

放在这里:

<span onDragOver={this.preventDefault} onDrop={this.dropHandler} 
    onClick={this.handleClick}>DROP HERE</span>

拖放处理程序:

  dragStartHandler = (idx) => (event) => {
    console.log(idx,"called drag event and loaded data in drag object")
    event.dataTransfer.setData('text', idx); 
  }

  dropHandler = () => (event) => {
    event.preventDefault();
    console.log("DROP EVENT")
  }

  preventDefault = () => (event) => {
    event.preventDefault();
    console.log("prevent default")
  }

下面是对该代码的修改: https://jsfiddle.net/69z2wepo/229855/

但是当我单击可拖动的图像,将其拖动到放置区域并释放鼠标按钮时,不会调用Drop事件。这是在Chrome,火狐和Safari上。

如何正确调用放置事件?