HTML and CSS Reference
In-Depth Information
Some of the groundwork for your export drag-and-drop functionality has already been set.
In listing 3.10 in the displayBrowserFileList function, you added code that cre-
ated a new list item for each of the files in the filesystem. If you look at this code, you'll
notice that the <li> element you constructed has an attribute, draggable , set to true :
files . forEach ( function ( file , i ) {
var li = '<li id="li_' + i + '" draggable="true" >' + file . name
+ '<div><button id="view_' + i + '">View</button>'
+ '<button class="green" id="edit_' + i + '">Edit</button>'
+ '<button class="red" id="del_' + i + '">Delete</button>'
+ '</div></li>' ;
In addition, you'll see that a listener was added to the dragstart event of this item:
var doDrag = function ( e ) { dragFile ( file , e ); }
listItem . addEventListener ( 'dragstart' , doDrag , false );...
Believe it or not, all you need to do to implement the export functionality is to define the
dragFile function. One last time, add the code in the next listing to app.js, right after the
line fileDropZone.addEventListener('dragover', importDragOver,
false) .
Listing 3.18. app.js—Allowing users to export files by dragging them out of the app
If you were hoping for more code than that to implement the export functionality, you're
probably disappointed—that really is all you need. The toURL method that was used pre-
viously in the viewFile method is put to use again, this time to construct a downloadable
object ( DownloadURL ) that's saved to the user's computer. Be sure to give it a try; drag
one of the files out of your application and drop it on your computer's desktop.
Search WWH ::

Custom Search