如何在 Javascript (React) 中将拖动事件限制为容器 div？答案

【问题标题】：How do I restrict drag events to a container div in Javascript (React)?如何在 Javascript (React) 中将拖动事件限制为容器 div？
【发布时间】：2017-06-25 14:24:48
【问题描述】：

以下代码创建的 div 元素包含一个边框。如果我通过边框拖动缩略图，则拖动事件的目标（ev.target）是 div 元素。如果我通过封闭的图像拖动缩略图，目标就是图像本身。

我希望拖动事件的目标始终是包含 div。我正在尝试这样做，以便可以更改缩略图中包含的图像。

function Photo_Thumbnail(props){
    return (
        <div draggable="true" onDragStart={dragStart} onDragOver={dragover_handler} onDrop={drop_handler}>
            <Thumbnail src={props.photo}/>
        </div>  
    );
 }

【问题讨论】：

标签： javascript html reactjs frontend dom-events

【解决方案1】：

我自己设法解决了这个问题。

在拖动事件处理程序中，使用 event.currentTarget 属性而不是 event.target。这将捕获拖动事件已绑定到的 dom 元素。

【讨论】：