Home arrow HTML arrow Drag and Drop API in HTML5
HTML

Drag and Drop API in HTML5


In this first part of a two-part tutorial, I will show you how to use the Drag & Drop API included with HTML5. As you'll see, dragging and dropping files from your local hard drive to a predefined section in the target HTML document is quite a simple process, whose workhorses are the “dragover” and “drop” event handlers.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
October 03, 2011
TABLE OF CONTENTS:
  1. · Drag and Drop API in HTML5
  2. · Dragging and dropping local files into the previous web page

print this article
SEARCH DEVARTICLES

Drag and Drop API in HTML5
(Page 1 of 2 )

Undeniably, HTML5 is a vibrant, active creature, loaded with features which, in the last few months, have put a big smile on the faces of many web designers. There are good reasons for this: effectively, now it’s possible to massage the new markup elements and create more semantic documents in a snap; easily persist data in the browser thanks to the local storage facility; and even perform multithreaded tasks by exploiting the functionality of web workers (feel free to add the feature of your choice to the list).

If you thought, however, that the aforementioned abilities were all that HTML5 brought to the table so far, fasten your seat belt and get ready for more exciting news. The spec comes with a couple of rich APIs (popularly know as the Drag & Drop and File APIs), which will permit you to drag and drop files from your local hard drive to your browser and process them in all sorts of clever ways.

Unfortunately, as with many other shiny and flashy facilities that have seen the light in the past, the support for the APIs in question is still immature and scarce. If you want to see harsher opinions about this, just make sure to read what Peter-Paul Koch says about the topic.

Opinions aside, my goal here is simply to show you how to start using the mentioned APIs through the implementations made by Mozilla’s dev team. In doing so, hopefully you’ll be able to grasp how to drag and drop files from your local machine to Firefox and parse them in a pretty useful fashion.

So, does my proposition sound engaging enough for you? Then don’t waste more time; get reading!

Creating a sample web page

To demonstrate the actual functionality of the Drag & Drop and File APIs when using Firefox, we first need to create a “droppable” area on a web page which allows… yes, the dragging and dropping of local files to the browser’s window for further processing.

To achieve this in a simple manner, below I defined a basic HTML5 document, which contains the aforementioned area. Have a look at it:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML 5 Drag'n Drop API</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #fff;
    font: normal 0.8em Arial, Helvetica, sans-serif;
    color: #000;
}
h1 {
    font-size: 5em;
    color: #585858; 
}
h2 {
    font-size: 4em;
    text-align: center;
    color: rgba(192, 192, 192, 0.7);
    text-shadow: 1px 1px 0 #FFF;
}
/* main wrapper */
#wrapper {
    width: 780px;
    margin: 0 auto;
}
/* file container */
#file-container {
    width: 300px;
    min-height: 300px;
    margin: 0 auto;
    background: #eee;
    border: 3px dotted #585858;
}
</style>
</head>
<body>
    <div id="wrapper">
        <header>
            <h1>HTML 5 Drag'n Drop API</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
        </header>
        <section>
            <div id="file-container">
                <h2>Drop your files right here...</h2>
            </div>
        </section>
        <footer>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
        </footer>
    </div>
</body>
</html>

As you can see, the document includes a div identified as “file-container.” It will act as the aforementioned droppable area. In addition, you should notice that I decided to assign fixed dimensions to the element (500px x 500px respectively); but naturally, you’re free to alter these values and pick the ones that suit your needs bests.

So far, so good. At this point the scenario is finally set for us to start dragging and dropping local files inside the previous web page container. Nevertheless, the details regarding how to accomplish this will be discussed in the upcoming segment.

Thus, move ahead and keep reading.
  


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials