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.)

}