Web Development with jQuery®

(Elliott) #1

Implementing Drag-and-Drop File Uploads (^) ❘ 309


FIGURE 11-2


The example presented in Example 11-2 is signifi cantly longer than Example 11-1, but it offers a
more complete implementation of the drag-and-drop API in a web-based fi le/folder manager para-
digm. The following is an examination of the bits and pieces of Example 11-2 that are new from
Example 11-1.

Adding the File Information Data Object


The fi rst new piece is the creation of a new JavaScript object called dragAndDrop. This new object
holds most of the logic for the implementation of drag-and-drop fi le uploads. You defi ne two new
properties, path and files, which keep track of the current fi le path that you’re uploading to and
what fi les you’re uploading to that location. The fi rst method on the new dragAndDrop object that
you created is called openProgressDialogue(). (Dialogue is spelled the English way, rather than the
American way, which is simply a personal idiosyncrasy.)

http://www.it-ebooks.info

Free download pdf