JS: OnDrop not getting the source ID [solved]

Posted on Updated on

So this problem plagued me for several days before I finally figured it out.

For example, you have the following code and it works:

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

However, what if you changed the HTML code to this:

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

Well, put simply, it won’t work.

This won’t work either – even though the drag code is correct. It simply can’t be in an ‘A’ tag, like the following code.
<a href="#">
 < img draggable="true" ondragstart="drag(event)" id="drag1"
 src="//placehold.it/336X69/ff0000" width="336" height="69" />
 </a>

An “a” won’t return the source id in this instance. Why? I don’t know. But it won’t work, so don’t do it.

To make a drop and drag work properly in all browsers, the ondragstart must not be on an ‘A’ tag. IMG are ok. maybe even LI, or DIV – but not A.

I hope this helps. It took me a long time and a lot of JS code to find alternatives, but it was a simple fix in the end.

This has been confirmed to work on the following:

Safari:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/602.2.14 (KHTML, like Gecko) Version/10.0.1 Safari/602.2.14

Opera:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36 OPR/42.0.2393.94

FireFox:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:50.0) Gecko/20100101 Firefox/50.0

Chrome:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36

Opera Dev:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2914.3 Safari/537.36 OPR/43.0.2431.0 (Edition developer)

 FireFox Dev:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:52.0) Gecko/20100101 Firefox/52.0

 

While this code example isn’t perfect, and WordPress keep on messing up the formatting and the actual content of this page, I’ll keep adding to it to get it 100% right.

Please note the extra spaces in the code there, at the script and div tags. This is because WordPress is breaking it on me.

It’s a frustrating state of HTML that the drop and drag currently in. Nothing is ever 100% functional and many features are just cross-browser broken. This is a good example of that.

Here is my answer formatted better:

http://stackoverflow.com/questions/26499462/get-dropped-elements-id-instead-of-drop-target-id/41274540#41274540

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s