Question

我想从图像拖动到这样的跨度：

从这里拖曳

<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/

但是，当我单击可拖动的图像，将其拖动到放置区域并释放鼠标按钮时，就不会调用放置事件。这是在chrome，firefox和safari上。

如何正确调用放置事件？

Answer 1

解决方案：

更改

onDragOver={this.preventDefault}

到

onDragOver={this.preventDefault()}

如果您使用的是ES6。回到基础永远不会有害：-）

未在React应用中触发onDrop事件

1 个答案: