ID of dropped items instead of target ID

Question

I'm new to jQuery and getting stuck trying to get the id of the elements of the draggable image to add to the target, instead of the image element itself or the id of the target. I am using native DND html5. And so far I can get the element to be added by sending its identifier using the datatransfer method in the drag function and the getdata function in the frame. Whenever I try to call this identifier from a drop, however, it gets the identifier of the target target instead of dragged items.

Any help would be greatly appreciated, as I carefully checked it on the Internet and found nothing but additional methods to get the target ID of the drag region. Here is a snippet of my current code script:

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

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

Therefore, use ev.target.id to refer to the identifier of the target.

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

Answer 2

Thanks @Arun P Johny. Great work on this simple example.

However, I just wanted to add that if you try to drag from the “A” tag, you're out of 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" /> 

It took me a long time to find out about this, because many of the browsers do not return or do not allow getting the original identifier of what you are dragging. In this example, you should specify the source identifier in the warning, as well as in 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" />