Get dropped elements id instead of drop target id

Question

I am fairly new to jQuery and am stuck trying to get a dragged image elements id to append to the drop target instead of the image element itself or the drop targets id. I am using the html5 native DnD. And so far I can get the element itself to append by sending through its id with the datatransfer method in the drag function and the getdata function in the drop. Whenever I try to call that id from the drop however it gets the drop target id instead of the dragged elements.

Any help would be greatly appreciated as I have searched thoroughly online and found nothing but more methods to get the target id of the drop area. Here is a snippet of my current code fiddle:

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

function dragStart(ev) {

ev.dataTransfer.setData('Text/html', ev.target.id); // sends the dragged images data.

//alert(ev.target.id); // alerts the correct id of the dragged image.

}


function drop(ev) {

ev.preventDefault();
var data = ev.dataTransfer.getData("text/html");//retrieves dropped images data.
ev.target.appendChild(document.getElementById(data));//this displays the dropped image.

//alert(ev.target.id); // alerts the id of the drop target(Want to get the dropped images id.)

//$("#mybillets").append("<span>"+ev.target.id+" </span>"); //appends the drop targets id(Want to append the dropped images id.)
}

Answer 1

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="https://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="https://placehold.it/336X69/ff0000" draggable="true" ondragstart="drag(event)" width="336" height="69" />

Answer 2

To clarify for people like myself for how to get both the ID of draggable element and droppable target: based on the code provided in the question from Jason:

    function drop(ev) {

          var dataA = ev.dataTransfer.getData("text/html");
          var dataB = ev.target.id;

          //console.log(dataA); ==> This will give "drag1" (object/item being dragged)
          //console.log(dataB); ==>This will give "div1" (area the object is being dragged into, AKA drop target)
          
     }

Answer 3

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

Answer 4

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" />