11 Amazing HTML5 Drag And Drop Examples.

By Tara Hornor

Mar 2, 2014

Many Internet users cannot fathom just how cool drag and drop really is. Like me before code knowledge, most users probably just had a brief flash of “Wow, that’s kinda neat” when they first used Gmail’s feature for dragging a file onto a message for a super fast upload. And now with fairly recent advances, HTML5 drag and drop is even more impressive.

Wikipedia defines drag and drop as “a pointing device gesture in which the user selects a virtual object by ‘grabbing’ it and dragging it to a different location or onto another virtual object.” It has become a huge part of the user experience on nearly every device and in any application that requires the movement of elements. From games to uploading files to web design platforms, this operation both encourages interaction and makes it easy for users to quickly rearrange items.

HTML5 has not always been the go-to programming language for creating this functionality. After all, other languages such as jQuery are much easier to customize for implementing drag and drop (DnD) into a program. However, HTML5 does have excellent advantages over other DnD code. In completing specific tasks, such as dragging files from the desktop to the browser, HTML5 takes less work than other languages due to native browser support.

The following are 11 examples and advantages of HTML5 drag and drop. From native functionality to the ability to make nearly any element draggable to interesting benefits for web designers, HTML5 DnD definitely provides some interesting possibilities.

Advantages Of Drag And Drop.

Example 1: Modern Style.

One way that HTML5 comes in handy is with the native browser support. According to Dennis Nelson’s RDA Corp article, an advantage of HTML5 over jQuery UI is that HTML5 is not dependent on third party libraries for DnD, relying on native functionality instead. Nelson mentions that when done right, “it can help create a nice, modern look and feel for a web page/application.” I can’t help but agree that this feature in Gmail looks very slick:

Example 2: Dynamic Website Effects.

Many website applications require the use of DnD for dragging elements onto other elements on the page for interactive purposes. Alexis Goldstein in her SitePoint article gives us the example of planning boards that require the dragging of note cards from one column to another. You may want to play around with her awesome demo or even follow along her tutorial to learn how to create one of your own.

Example 3: Widely Supported.

HTML5 DnD is widely supported across all major browsers: Chrome, Firefox, Opera, IE 9+, and Safari. Now, jQuery UI also works on major browsers, but only if configured correctly. HTML5 requires no such extra configuration steps for these modern browsers.

Example 4: Any Element Is Draggable.

Eric Bidelman of HTML5Rocks.com calls drag and drop a “first class citizen in HTML5.” His basis for this claim? HTML5 DnD calls on Javascript, an event-based mechanism, and additional markups, to make it possible to drag nearly any element. Images, files, links, and even other DOM nodes are all examples of draggable elements.

Example 5: Faster, More Responsive Apps.

Using HTML5 results in a faster, much more responsive performance due to the native browser support. While jQuery UI makes it easier to create custom, rich drag and drop immersions, HTML5 drag and drop for a certain feature simply isn’t comparable. Without the need for a library, the speed and usability for common functions increases exponentially.

Example 6: Feature Detection.

As mentioned above, the HTML DnD will work on most browsers. However, you can make sure no one will be without a working app by using the feature detection available, rather than having to check the browser’s User-Agent. If no supported browser is detected, it will fall back onto a library solution, which means that DnD will work, no matter the browser. Bidelman suggests using Modernizr to keep the detection to one line.

Example 7: dataTransfer And Drag Events.

Making an item draggable in HTML5 is really very simple. You only need to set the draggable attribute to true (draggable=”true”) on the item you wish to make draggable. And remember, you only have to use the draggable attribute for items that aren’t already draggable through native functionality.

All HTML DnD operations require a series of events that fire in various stages of the process. HTML5 also uses a dataTransfer property that holds all of the data for the drag event. This is where it gets more complicated, but also more fun.

Most commonly used operations are the dragstart, dragover, and drop events, but check out the Mozilla Drag and Drop page to see all of the events available. To start the drag operation, you have to create an event called the dragstart listener and set the drag data for this listener. The dragstart event is fired when a user clicks on a draggable element, and the cool part of this event is that you can set information such as the image or effect associated with the drag.

<divdraggable="true"ondragstart="event.dataTransfer.setData('text/plain', 'You can drag this text')">You can<strong> </strong>this text.

</div>

The dragover event is fired as the draggable item is moved over an element to tell whether or not a drop is allowed. The fun part of this event is that you can easily set effects such as highlighting on the drop spot.

The final stage is the drop event, of course, and this event only fires if the draggable item was dropped on a valid drop target. Once fired, the listener retrieves the data as set by the dataTransfer property using the getData method.

function onDrop(event)

{

var data = event.dataTransfer.getData("text/plain");

event.target.textContent = data;

event.preventDefault();

}

Example 8: Default Behavior.

HTML5 DnD comes with default behavior, but it comes with the ability to customize. For instance, the default behavior of the image shown when dragged is the ghosted copy of the element. In other words, as a user clicks on the element and starts dragging, the original image stays put, but a transparent copy follows the user’s cursor until released.

Effects can also be added to an HTML DnD, and these are actually operations. For instance, the word “copy” can be shown to indicate that the item being dragged will be copied onto the drop element.

Mozilla provides some excellent examples for ways to change the default behavior for the image and for different effects.

Example 9: Dragging And Dropping Files.

One way that HTML5 outperforms other code languages in DnD is, again, in the built-in support for dragging and dropping files. What this means is that a user can drag files from their desktop to the browser and then see them displayed within the browser.

For example, FileDrop.js is a “self-contained cross-browser HTML5, legacy, AJAX, drag and drop, Javascript file upload” that allows users to upload files by either clicking on the drop zone or dragging and dropping the file into the drop zone. Either way, FileDrop.js uses no library, only native Javascript code. This keeps performance light and responsive.

Wrapping It Up.

Example 10: Back And Forth.

Another nifty functionality with HTML5 is the ability to drag items back and forth from one location to the next. This ability also allows for such advanced DnD operations as dragging an image from a browser onto the desktop, or dragging an element onto another element and then back again to the original location.

John Ring mentions that many complain about the large amount of events and event handlers that have to be used. He aptly points out, though, that “native cross-browser support of drag and drop without relying on external libraries is a useful feature that developers should be aware of, especially with the inclusion of support for file drag and drop to and from the desktop.”

To create a back-and-forth function, you simply have to make both elements drop target elements, and CoursesWeb provides a very easy to follow tutorial.

Example 11: Code-Free Designing.

Probably one of my favorite examples is with professional web design platforms. Most use drag and drop to provide an easy code-free studio for web designers. With a WYSIWYG designing experience, professional designers can create amazing custom websites for clients, even if they’ve never learned a bit of code.

Wrapping It Up.

HTML5 offers lots of unique possibilities within the realm of DnD. While jQuery UI makes it easier to create beautiful operations, HTML5 allows for flawless experience without the need for heavy libraries.

What are your favorite features or examples with HTLM5 DnD? Which do you prefer - HTML5 or jQuery UI - for this functionality? Let us know in the comments below!

Blog  /  Web Design  /  Resources

Comment