HTML and CSS Reference
In-Depth Information
catcher.addEventListener(
"drop"
, function(evt) {
if (evt.preventDefault) evt.preventDefault();
if (evt.stopPropagation) evt.stopPropagation();
this.style.border = ""; // remove the border from the catcher
var files_array =
evt.dataTransfer.files
;
// Now you have a reference to the file(s) that the user dragged
// onto your page. Do something cool with them!
return false;
}, false);
As you can see, the native D&D functionality is focused on data transfer between two
elements, rather than on moving an element from one position to another. This helps
us out here big time. We receive in the
dataTransfer.files
property a list of references
to the file(s) that the user chose to drag onto our application. There is nothing visual
about this operation—it is entirely about dragging data (file references) from the desk-
top to an element on our page!
Once we have a reference to a file on the user's system, what can we do
with it? We address that in
Recipe 10.7
.
There are likely to be a lot of changes to this advanced functionality before it settles
and is standardized across all browsers. But it's exciting to know that it's coming soon!
See Also
For more information on native HTML5 drag and drop, see this tutorial:
http://www
10.4 Web Workers
Problem
You want to run a complex, long-running JavaScript task without locking up the UI in
the browser.
Solution
You need to run the JavaScript task in a separate thread, and the way to do this is with
the
Worker
API, otherwise known as Web Workers.
Web Workers create a special environment for JavaScript code to run in that occurs in
a separate thread from the main UI of your page. This means that your page's UI won't
be locked up if you have particularly long-running JavaScript code.
