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.
Search WWH ::

Custom Search