gpt4 book ai didi

javascript - onDrop 事件未在 React 应用程序中触发

转载 作者:行者123 更新时间:2023-11-30 20:21:43 33 4
gpt4 key购买 nike

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

从这里拖动

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

此代码的 fiddle 在这里:https://jsfiddle.net/69z2wepo/229855/

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

如何正确调用drop事件?

最佳答案

解决方案:

改变

onDragOver={this.preventDefault}

onDragOver={this.preventDefault()}

如果你使用的是 ES6。回到基础永远不会有害:-)

关于javascript - onDrop 事件未在 React 应用程序中触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51385349/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com