Graphics Reference
In-Depth Information
};
holder.ondragend = function() {
this.className = '';
return false;
};
holder.ondrop = function(e) {
...
}
}
In this code fragment, we defined three event handlers. The
hold-
er.ondragover
event handler sets the class on the div element to
'hov-
er'
. This way, the user can see that they are allowed to drop the file there.
The
holder.ondragend
event handler is called when the user moves
away from the drop area. In the event handler, we remove the class of the
div
element. Finally, if the user drops a file in the designated area, the
holder.ondrop
function is called, which we use to process the dropped
image.
4. The final step is to process the dropped resource and update the material of
our box. When a user drops a file, the following piece of code is executed:
this.className = '';
e.preventDefault();
var file = e.dataTransfer.files[0],
var reader = new FileReader();
reader.onload = function(event) {
holder.style.background =
'url(' + event.target.result + ')
no-repeat center';
var image =
document.createElement('img');
image.src = event.target.result;
