HTML and CSS Reference
In-Depth Information
Some of the groundwork for your export drag-and-drop functionality has already been set.
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.
