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: Tell the browser this is an element that accepts
drop data.
2.
On drop: Once something has been dropped on the element,
do something with the dropped data.
I'm explaining the absolute minimum required to achieve drag
and drop, but this method is only going to work in Safari. I'll then
walk you through the tweaks required to get it to work in Firefox,
Chome, and IE.
The other thing worth mentioning is that the specifi cation 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, or certainly not when it comes to practice. You need
three events to get it working in all browsers, but not in 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
.
