Browser-based APIs - HTML5 and CSS3 - page 172

Note that for advanced developers the best practice is to always attach
event handlers in script. For now, this snippet can be copied and
pasted into your own code.

PROBLEM 4
Chrome is now broken!

SOLUTION 4
Find the closest parent ID .

This is a strange one. Now that
the draggable item is an anchor
rather than a list item, Chrome
inserts an extra element—the
parentNode no longer has an ID ,
so this code doesn't work:

The solution is to write a utility
function to recurse up the docu-
ment tree until an element with
an ID is found:

function grabOuterId(el) {
if (el.id) {
return el.id;
} else {
return
grabOuterId(el.parentNode)
}
}

target.parentNode.id

Now take every place in the
code where the ID is needed, like
this

And replace it with a call to the
new function:

event.dataTransfer
.setData('Text',
grabOuterId(target)
);

event.dataTransfer
.setData('Text',
target.parentNode.id);

You can avoid this issue altogether if the elements you want to drag are
links or images—add the ID directly to those draggable elements. An
alternative approach for IE support on elements that aren't draggable
by default is to add the links dynamically with script only in IE .