HTML and CSS Reference
In-Depth Information
Since there's nothing to be done to the draggable images, you
just need to hook up the drop zone, which requires the follow-
ing event handlers:
1.
Drag over: Tells the browser this is an element that accepts
drop data.
2.
On drop: Once something has been dropped on the ele-
ment, the browser does something with the dropped data.
I'm explaining the absolute minimum required to achieve drag
and drop, but this minimum method will only work in Safari. I'll
then walk you through the tweaks required to get it to work in
Firefox, Chrome, and IE.
The other thing worth mentioning is that the specification up on
http://dev.w3.org/html5/spec/editing.html#dnd
says that there
are three events you need to handle drag and drop. That isn't the
case, at least certainly not in practice. You need three events to
get it working in all browsers, except for Firefox and Safari.
Let's put all these caveats aside for a minute and crack on with
our demo. The following listing is the über-minimalistic source
you need to see the drag-and-drop API in action:
<!DOCTYPE html>
<title>Simple drag demo</title>
<style>#drop { height: 100px; border: 5px solid #ccc; }
¬ </style>
<img src=”http://img.tweetimag.es/i/rem” alt=”@rem” />
<img src=”http://img.tweetimag.es/i/brucel”
¬ alt=”@brucel” />
<div id=”drop”></div>
<script>
var drop = document.getElementById('drop');
drop.ondrop = function (event) {
this.innerHTML += '<p>' + event.dataTransfer.
¬ getData('Text') + '</p>';
};
drop.ondragover = function () { return false; };
</script>
I'm using the minimal HTML required just to keep things short.
Yo u c a n s e e f r o m t h e p r e v i o u s c o d e t h a t I ' m g r a b b i n g a r e f e r -
ence to the
div#drop
element and then setting two inline event
handlers:
ondrop
and
ondragover
.
NoTE
As used in this sec-
tion, “drop zone” simply
means a place that a user drops
something. I am not referring to
the recently added W3C attri-
bute
dropzone
discussed in
the sidebar “Native drop zones”
later in this chapter.
