javascript - 如何在 JavaScript 中获取被拖动元素的 id

Question

我想在拖放事件处理程序中获取 JavaScript 中拖动元素的 id。

place5 的 id 的绿色 div 是可拖动的，放置位置是另一个 div dropArea 的 id(带有红色边框)。

如何在放置事件处理程序中获取 place5 div 的 id？

function dragEventHandler(theEvent) {
  theEvent.dataTransfer.setData("Text", theEvent.target.id);
  // some code here.
}

function dropEventHandler(theEvent) {
  // how to get the id of div with id "place5" here?
}

.mainArea {
  width: 200px;
  height: 100px;
  border-color: red;
  border-style: solid;
  border-width: 5px;
}

#place5 {
  background: green;
  height: 20px;
  width: 100px;
}

<div id="dropArea" class="mainArea" ondrop="dropEventHandler(event);" ondragover="event.preventDefault();">
</div>
<div id="place5" draggable="true" ondragstart="dragEventHandler(event);">
</div>

Answer 1

执行与拖动开始事件期间执行的操作相反的操作。

所以在 dragstart 上你有:

function dragEventHandler(theEvent) {
    theEvent.dataTransfer.setData("Text", theEvent.target.id);
    //Some code here.
}

因此在 drop 上你将拥有:

function dropEventHandler(theEvent) {
    var id = theEvent.dataTransfer.getData("Text");
    //Other code here.
}