HTML and CSS Reference
In-Depth Information
The filesystem functionality of the application is now complete. You should be able to cre-
ate, load, view, edit, save, and delete HTML files using the app. If you want to take the
application further, you could easily extend it so that it supports multiple directories, allows
editing of additional file types (CSS and JavaScript support would be nice), and provides
syntax highlighting of the HTML markup. There are a plethora of opportunities for expan-
sion.
We'll wrap up this chapter in the next section by adding a jazzy extra—drag-and-drop sup-
port.
3.4. Adding drag-and-drop interactivity
Drag-and-drop interactions are a popular feature in computer applications. For example,
consider the GUIs of current OSes. They allow you to move files, documents, and applic-
ations around by dragging them from one location and dropping them to another. In Mac
OS X, if you have an external hard drive plugged into your computer, you can eject it by
dragging it to the trash icon in the dock.
In recent years, web applications have started to provide drag-and-drop support. Common
examples are copying/moving items from one list to another; rearranging the order of a list;
moving regions of the page around for a customized experience; and moving images, files,
or documents to virtual directories in content management systems. Up until now, deve-
lopers had to rely on using JavaScript frameworks to provide web apps with decent drag-
and-drop features. In HTML5, however, a full Drag and Drop API has been specified to
supplant these JavaScript frameworks.
Drag and Drop
API
4.0
3.5
5.5
12.0
3.1
In this section, you'll use the Drag and Drop API to enhance the Super HTML5 Editor ap-
plication by
