9 Supercharged HTML5 Drag And Drop Illustrations For Your Design Inspiration.

by Zack Rutherford

 

Mar 2, 2014

 

If you’re not already familiar with HTML5 drag and drop interfaces, you’ve probably been on the backend of the web building business for quite a while. Still, I’ve got to assume there’s a few poor schlubs out there that aren’t aware of this powerful design feature. To put it simply, drag and drop describes the process by which you can select a virtual object with your mouse, move it across your screen, and place it neatly in a new location.

 

Though it might not sound too impressive, you’d probably be surprised to find out how useful this handy little feature can be. And even more surprised at how usable it can make a website or application.

 

 

HTML5 Drag And Drop Applications.

 

As I’ve stated above, HTML5 DnD elements are extremely useful. They eliminate the need to access data on your device from your browser, which saves time and effort. DnD increases efficiency from more than just that angle though. It also facilitates organization by making the movement of elements within the browser much easier.

With drag and drop functionality enabled you can:

Easily upload data of various types

 

  • Shift position of on page media elements

 

  • Reorder lists

 

  • Organize files/folders online

 

  • You can even create a neat puzzle game to entertain your visitors (example of this below)

 

Perhaps more important than any of the basic usability features, though, is the “hip” factor that HTML5 drag and drop enabled websites exude. The novelty of the function is still in full effect as far as browsing is concerned.

Imbuing your website with draggable/droppable elements will instantly attach a level of chic contemporary coolness to your web presence in most every user’s mind. This is because drag and drop functionality can make any element on your website dynamic, interactive, and more engaging to users. Not only that, but it’s also intuitive.

Just like in the real world where we can pick up a piece of paper and drop it in a file, drag and drop elements mimic physical reality with a tactile imitation of “grabbing” an object with your mouse, and then dropping it into a new  location.

It’s almost (but not quite) a form of skeuomorphism; one that imitates a feeling of physicality rather than the look of a physical object. Anytime you can take a bit of the familiar and inject it where it’s unexpected, it automatically becomes novel.

And novelty will always take you a long way in the world of design.

 

 

D&D Suddenly Became Cool?

 

Well, we’re not talking about the board game, so put your level 44 dark-mage away. But the short answer is yes, HTML5 drag and drop functionality falls under somewhat of an A-list status these days. It’s widely supported by major browsers, commonly appreciated by users, and often implemented by designers. All the heavyweight browsers use it: Chrome, Firefox, IE, Safari, even Opera. You’d be hard-pressed to find a platform that didn’t have it as an option.

 

Part of the appeal of drag and drop is its versatility. Because drag and drop functions are event-based (in other words, triggered by a user action, most often a mouse click), because they make use of JavaScript API to boost up their power levels—way above 9000—and finally, because they are integrated with additional markups, you can make almost any imaginable on-page element draggable.

 

So basically all you have to do if you want an element to be draggable is specify it in the HTML5, and in most cases nearly all on-page elements are draggable by default. That’s why you get a ghost image when you drag the Google logo.

 

Having the draggability of these elements supported by the browser natively means that most any web app utilizing drag and drop is going to be a lot faster than… oh say, loading custom APIs to handle the animations or what-have-you. The latter would likely be the case if you were coding your own script using jQuery.

 

In some cases though, HTML5 isn’t supported by certain ancient browsers. When this happens you have to keep UX from being disrupted. So you need a mechanism to detect whether or not DnD is supported. Use a simple JavaScript method like feature detection to find out out whether or not the user’s device supports drag and drop. If it doesn’t, then use an API to create the animation and keep your site’s UX intact.

 

 

9 Samples of HTML5 Drag & Drop Functionality.

 

1. Gmail And Google Drive.

 

Gmail and Google Drive

 

Gmail and Google Drive. This one’s pretty well known at this point. Google has added drag and drop throughout many of their services, everything from image search to attachments in emails. You can’t forget the way you rearrange your files in Drive either. This is a fantastic example of the feature’s versatility.

You can basically enter any file type anywhere that Google accepts information, you can even search with images. It’s just plain awesome in terms of usability.

I’d feel too obstinate trying to tell Google how they might improve their services. Honestly, their DnD functionality is everywhere I’d expect it to be, and it makes my life infinitely easier. My only complaint is that editing in Google docs can sometimes get wonky.

The cursor will be out of line with the material you’re editing, and so on. Other than that, I’d just be nitpicking. So maybe they could just quit giving all my personal information to the government? Don’t be evil, remember?

 

 

2. Dropbox

 

Dropbox

 

The well-known online data storage service upped its usability rating back in 2012 by adding drag and drop uploads. Handy if you want to save something to the cloud when you aren’t at home with your desktop already synched.

This is really just usability 101. You don’t want to click to upload, search through your files, search through the Dropbox files and then click “save.” It’s a waste of time relative to the drag and drop action.

Not a gigantic one, but I start getting irritable during the tiniest of time spaces at this point. Such is the nature of the spoiled generation of folks growing up in the digital age. Give me intuitive and instantaneous or I’ll take my impatient business elsewhere.

Beyond the uploading, it’s very nice to move files within the interface via DnD as well. Organizing your files would be a real hassle if you had to go through the saving-to-new-locations process every time.

All that said, Dropbox could use some improvement, it’s not always easy to figure out exactly where your files are, but that has less to do with DnD and more to do with its overall structure.

Dropbox is simple, intuitive, and effective for 99% of your needs. Use it if you don’t need to collaborate in real time and if you want to share large files, or store them for your own personal use.

 

 

3. Awesome Drop.

 

Awesome Drop

 

Awesome Drop is a mobile app for Android.  If you thought drag and drop was a function isolated to desktop devices, you were pretty far off the mark. Awesome Drop is an extremely useful app that allows for seamless transfer of files between your computer and your Android device.

If you’ve ever tried to transfer these files without an app to support your efforts, you’ll know how much of a pain it can be. Awesome Drop takes care of all that wirelessly. Just enter a pin into the app on your phone and then drop files into the browser to copy them into your mobile.

Super easy, and supremely usable file transferring from any browser straight to your hip, front pocket, purse, or fanny pack. Wherever you happen to keep the device.

Be aware though, while Awesome Drop is capable of recognizing many file types, it’s not the best in regards to recognition, obscure file types will present issues. It also doesn’t support older browsers like IE8.

One thing that they really should look into is allowing the transfer to go in the opposite direction as well. Streaming files from your phone to your PC would really up its status. Overall, this is a neat app that can save you some time and frustration if you can’t remember where you put the USB cord.

 

 

4. Flickr.

 

Flickr

 

Remember Flickr? It’s that thing we used to use before Instagram. In an effort to update their image and improve their UX, Flickr decided to implement an HTML5 drag and drop uploader a couple of years back. Nobody really paid attention, but they’ve still got a dedicated user base of serious photography enthusiasts.

Flickr could improve their services by allowing uploads by folder as well as file. As it is, you have to reorganize your files into folder once you get them uploaded.

Call me wacky, but I still kinda like Flickr. You can still find plenty of high-quality stock images there that can be very applicable, for blog work at least. The community is still into it, and as long as there’s passion, there will always be good work bringing up the rear.

 

 

5. Evernote.

 

Evernote

 

One of the original cloud storage and business organizers. Evernote allows for drag and drop uploads, rearranging, and the like. It’s a lot like Dropbox in most regards, but it allows for more in the way of collaboration, note taking, and usability in general.

Its drag and drop function is the cohesive element that keeps the application running smoothly. For an information-sharing and data-storage site, DnD is an essential attribute to keep things organized, and Evernote delivers in spades.

One thing I don’t care for is that it won’t let  you edit files in the web app. You have to download them to whatever device you're using and then edit, which is adding one more step than in Google Drive.

Overall, if you’re looking for an app that allows for maximum collaboration and comprehensive note-taking, with some handy HTML5-enabled DnD, you can’t do much better than Evernote.

 

 

6. Facebook.

 

Facebook

 

You were probably already aware of this one, but Facebook’s photo uploader is super-simple drag and drop. Zuckerberg’s just gotta make sharing every waking second of your life as easy as possible.

 

It’s a great feature that allows you to quickly and easily upload your latest visual adventures, be they photo stills or video compilations of your favorite vines, whatever floats your boat.

 

What bugs me about this is that it’s not available as an option when you’re trying to create a new album. You can drag and drop straight to your status, but not when you’re trying to upload photos? That’s kinda weak.

Why implement advanced functionality in one area and not another? The status is used far more, and it’s not too much more difficult to upload your photos manually, but it’s just nonsensical not to make the whole interface as intuitive and easy to use.

 

Overall, it’s Facebook. I’ll complain until the cows come home, and then waste 5 hours looking at my freaking feed, and wondering why my friends aren’t more interesting.

 

 

7. Blender.

 

Blender

 

Blender. An open-source 3D animator that allows you to drag and drop media straight into a 3D environment. Very cool. Move images from files into the editor and drag and drop them in the editor to other areas for further cleaning.

This is an app for very advanced users, allowing you to work with polygon meshes, procedural brushes, texture, collision simulation, and a plethora of other criteria. The DnD is a steady constant within the interface, allowing you to move images into different parts of the interface as needed.

My only criticism is it’s too complex, but it sort of needs to be in order to accommodate its niche users. So what do I know. I’ve never animated anything in 2D, much less 3

 

 

8. TheMustacheGame.

 

TheMustacheGame.

 

TheMustacheGame. Remember when I said I’d give you an example of a fun game to entertain and engage your users? Yeah, click here.

Drag and drop mustaches over your favorite actors and actresses. Make it a real game and drink a beer every time something matches up hilariously.

There’s not much to critique here. It’s a fun game for you and a few friends.  It could be cooler of course. The mustaches could be equipped with facial recognition and freeze the movie when they line up perfectly. That would, however affect the narrative flow, so maybe just leave it as is.

 

 

9. Metropol.

 

Metropol

 

Metropol. A drag and drop music player! Give it a try, and enjoy the tunes. This website is an interesting experiment in marketing with newer web technologies. Utilizing HTML5 to make MP3 files draggable into a music player is an idea that’s brilliant in its simplicity.

I do wish the site were paginated though. I don’t like being redirected when I’m clicking top page links. It’s a clever one-pager, but I like having all the content in one place without spreading my traffic around. I’m stingy like that.

 

 

Technical Stuff.

 

Now that we know all about how cool drag and drop is, and you’ve seen all of the various ways it can be implemented, you’d probably like to know how to make all of your on-page elements draggable as well as droppable.

Draggable is easy, as we’ve said, it’s mostly done by default. Specifically, img attribute, selected text, and anchor elements that have an href attribute are all draggable by default. At least for most browsers. In cases where these are not the default settings, you’ll have to add the set it that way in the HTML, by adding the attribute:  draggable=“true” to whatever element you want to drag. Though it’s fairly easy to implement, this is a vital part of the process, and shouldn’t be ignored.

Dropping is another ball game entirely.

To make elements droppable follow this process:

Sample: (courtesy of w3schools)

 

Technical Stuff

 

1. You need to provide the type of data to be dragged. To set the data type, use the event’s method dataTransfer.setData(dataType, value). In the given   sample above, the drag() method, which is called during an ondragstart   event, is used to set the type.

 

Technical Stuff

 

Ondragstart calls:

 

Ondragstart calls

 

2. Specify where the draggable object can be dropped. The event ondragover can be used for this. Draggable elements can’t automatically be dropped onto other elements, you first have to change the default settings. To do this, call the event.preventDefault() function. This will allow the draggable element to be dropped in the specified location. As shown below:

 

Ondragstart calls

 

Ondragover calls:

 

Ondragover calls

 

3. Drop it like it’s hot. To complete the drop, specify the ondrop event which calls a function that will perform whatever drop action you want.

 

Ondragover calls

 

Ondrop Calls:

 

Ondrop Calls 

 

Drag and drop functionality adds depth, energy, and interactivity to any website upon which it is implemented. Because of the prevalence of HTML5 and widespread browser compatibility, the possibilities for its inclusion are only limited by the imagination of the designer.

 

With every on page element potentially being draggable, the only real challenge to this function’s continued prominence is the complex method of specifying drop points, and the appropriate responses for the dropped elements.

 

Where have you seen DnD cleverly implemented? I’m always looking for more cool examples. Tell me about it in the comments.

Brought to You by Webydo.

See how Webydo fits into your design workflow and business.

Request A Live Demo

Blog Menu

Subscribe to our blog:

//The disqus (comments) addition
comments powered by Disqus