Get dropped elements id instead of drop target id

Thanks to @Arun P Johny. Excellent work on this simple example.

However, I just wanted to add that if you try and drag from an "A" tag, you won't have much luck.

This will not work (in all browsers):

<a draggable="true" ondragstart="drag(event)" id="drag1" href="#">
 <img src="//placehold.it/336X69/ff0000" width="336" height="69" />
</a>

However this will work (in more browsers):

<img draggable="true" ondragstart="drag(event)" id="drag1" src="//placehold.it/336X69/ff0000" width="336" height="69" />

This took me a long time to discover this out, because many of the browsers don't return or let you get the source id of what you are dragging. This example should reveal the source id for you in an alert and also the console:

<script>
    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData('text', ev.target.id);
    }

    function drop(ev, target) {
        ev.preventDefault();
        console.log(target.id + " : " + ev.target.id) 
        console.log(ev.dataTransfer.getData("text/html")); 
        console.log(ev.dataTransfer.getData("text")); 
        var data = ev.dataTransfer.getData("text");
        alert(data)
    }
</script>
<style "type="text/css">
       #div1 
       { 
          width: 350px; 
          height: 70px; 
          padding: 10px; 
          border: 1px solid #aaaaaa; 
       }
</style>

<div id="div1" ondrop="drop(event, this)" ondragover="allowDrop(event)"></div>
<br/>
<img id="drag1" src="http://placehold.it/336X69/ff0000" draggable="true" ondragstart="drag(event)" width="336" height="69" />

In the drop method looks like ev is the event object, so ev.target will refer to the element on which the item was dropped.

So use ev.target.id to refer to the drop target id.

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData('Text/html', ev.target.id);
}

function drop(ev, target) {
    ev.preventDefault();
    console.log(target.id, ev.target.id)

    var data = ev.dataTransfer.getData("text/html");
    alert(data)
}

#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

<div id="div1" ondrop="drop(event, this)" ondragover="allowDrop(event)"></div>
<br/>
<img id="drag1" src="//placehold.it/336X69/ff0000" draggable="true" ondragstart="drag(event)" width="336" height="69" />

I have created simple drag and drop example that maybe you can use as example for your problem. There are 4 boxes where images can be dropped to. Just grab a image from the list below and drop it into one of the boxes above. The code will alert the movement you have made.

HTML Code:

  <div id="box1" class="empty">Box 1</div>
  <div id="box2" class="empty">Box 2</div>
  <div id="box3" class="empty">Box 3</div>
  <div id="box4" class="empty">Box 4</div>


<div id="example1" class=" container list-group col" >
  <div id="image1" class="fill list-group-item" draggable="true">
      <img src="https://source.unsplash.com/random/150x150"> Image 1
  </div>
  <div id="image2" class="fill list-group-item" draggable="true">
      <img src="https://source.unsplash.com/random/149x149"> Image 2
  </div>
  <div id="image3" class="fill list-group-item" draggable="true">
      <img src="https://source.unsplash.com/random/151x151"> Image 3
  </div>
  <div id="image4" class="fill " draggable="true">
      <img src="https://source.unsplash.com/random/152x152"> Image 4
  </div>
  <div id="image5" class="fill" draggable="true">
      <img src="https://source.unsplash.com/random/153x153"> Image 5
  </div>
  <div id="image6" class="fill" draggable="true">
      <img src="https://source.unsplash.com/random/154x154"> Image 6
  </div>  
  <div id="image7" class="fill" draggable="true">
      <img src="https://source.unsplash.com/random/155x155"> Image 7
  </div>
  <div id="image8" class="fill" draggable="true">
      <img src="https://source.unsplash.com/random/156x156"> Image 8
  </div>
  <div id="image9" class="fill" draggable="true">
      <img src="https://source.unsplash.com/random/157x157"> Image 9
  </div>
  <div id="image10" class="fill" draggable="true">
      <img src="https://source.unsplash.com/random/158x158"> Image 10
  </div>
</div>

Javascript

const fills = document.querySelectorAll('.fill');
const empties = document.querySelectorAll('.empty');

let object="";
let destiny=""; 

// Fill listeners
for (const fill of fills) {
  fill.addEventListener('dragstart', dragStart);
  fill.addEventListener('dragend', dragEnd);
}

// Loop through empty boxes and add listeners
for (const empty of empties) {
  empty.addEventListener('dragover', dragOver);
  empty.addEventListener('dragenter', dragEnter);
  empty.addEventListener('dragleave', dragLeave);
  empty.addEventListener('drop', dragDrop);
}

// Drag Functions

function dragStart() {
  this.className += ' hold';
  setTimeout(() => (this.className = 'invisible'), 0);
  console.log('Start');
  objeto = this.id;
}

function dragEnd() {
  //alert('Objeto: '+this.id);
  this.className = 'fill';
}

function dragOver(e) {
  e.preventDefault();
}

function dragEnter(e) {
  e.preventDefault();
  this.className += ' hovered';
}

function dragLeave() {
  this.className = 'empty';
}

function dragDrop() {
  //alert('Destino: '+this.id);
  this.className = 'empty';
  destino = this.id;
  showMove();
}

function showMove()
{
  alert('Moving object: '+objeto+' -> to : '+destino);
  console.log('Moving object: '+objeto+' to : '+destino);
}

https://codepen.io/iburguera/pen/jObLaKY?editors=1010