title: How to get the id of a dragged element in JavaScript
body: <p>I want to get the <code>id</code> of a dragged element in <strong>JavaScript</strong> in the drop event handler.</p>
  <p>The green <code>div</code> with the <code>id</code> of <code>place5</code> is draggable and the drop location is another <code>div</code> with the <code>id</code> of <code>dropArea</code> (with a red border).</p>
  <p>How do I get the <code>id</code> of the <code>place5</code> <code>div</code> in the drop event handler?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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?
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.mainArea {
    width: 200px;
    height: 100px;
    border-color: red;
    border-style: solid;
    border-width: 5px;
  }
  
  #place5 {
    background: green;
    height: 20px;
    width: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="dropArea" class="mainArea" ondrop="dropEventHandler(event);" ondragover="event.preventDefault();"&gt;
  &lt;/div&gt;
  &lt;div id="place5" draggable="true" ondragstart="dragEventHandler(event);"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>