HTML and CSS Reference
In-Depth Information
return false
, too. Since you're doing the same thing, I've cre-
ated a function to
return false
:
function cancelEvent() { return false; }
drop.ondragenter = cancelEvent;
drop.ondragover = cancelEvent;
Again, since you're making it work in IE, IE doesn't pass in the
event
object to our inline handler, so you need to change the
drop
event handle to grab the global
event
object if you didn't
receive one.
Yo u a l s o n e e d t o c a n c e l t h e e v e n t f r o m b u b b l i n g u p t h e D O M t o
prevent new windows opening. Typically
return false
should
handle this (as it does in the other browsers), but IE needs a
helping hand with
event.cancelBubble=true
.
drop.ondrop = function (event) {
event = event || window.event;
this.innerHTML += '<p>' + event.dataTransfer.getData
¬ ('Text') + '</p>';
event.cancelBubble = true;
return false;
};
One final issue to fix: When you drop the image in IE or Chrome,
you get “null” as the text in our drop zone. To fix this you need
to set some data under the
Text
data type once the element
starts to drag, using the
dragstart
event:
var imgs = document.getElementsByTagName('img'),
i = imgs.length;
while (i--) {
imgs[i].ondragstart = function (event) {
event = event || window.event;
event.dataTransfer.setData('Text', this.getAttribute
¬ ('alt'));
};
}
Now you can see that I've set some data whose type is “Text”
based on the
alt
attribute on the image. Now when the image
is dropped, and the
Text
data type is read, you'll get the Twitter
screen names instead of the image source. This drag-and-drop
demo works in IE5 onwards, Firefox, Chrome, and Safari. More
importantly, it's the
setData
method that really shows off the
possibilities of the drag-and-drop model, but equally exposes
some potential issues in the specification.
