Professional JavaScript For Web Developers

Drag and Drop
In this example, all the dragged item events fire, but no drop target event fires when you drag the text
over the red . In order to turn the into a valid drop target, you must override the default
behavior of dragenter and dragover. Because this is IE-specific, you can just set the
oEvent.returnValue attribute to false:
System Drag And Drop Example
function handleDragDropEvent(oEvent) {
var oTextbox = document.getElementById(“txt1”);
oTextbox.value += oEvent.type + “\n”;
switch(oEvent.type) {
case “dragover”:
case “dragenter”:
oEvent.returnValue = false;
}
}
Try dragging the text from the textbox to the red square.
Drop target events fire now.
In this example, when you drag the text over the red , the cursor changes to a pointer with a
plus sign next to it, indicating that this is a valid drop target. By default, the dragenter and dragover
events for the don’t allow dropping, so if you prevent the default behavior you allow the
to become a drop target. After dragenter and dragover are fired, dragleave and drop are
also enabled.
The dataTransfer object
Simply dragging and dropping isn’t of any use unless data is actually being affected. To aid in the transmission
of data via drag and drop, Internet Explorer 5.0 introduced the dataTransfer object, which
exists as a property of event and is used to transfer string data from the dragged item to the drop target
(the dataTransfer object is still used in IE 6.0).
393