Getting HTML5 drag and drop to work is a great start, but taking this to production requires certain UX considerations.
In the previous article of this series: “Getting Started with HTML5 Drag and Drop Part I: Introduction,” we covered the bare minimum code needed to make an HTML element draggable, and droppable onto another element. So, in Part II of this series, I will talk about two events that allow for better UX with regard to any element onto which you might drop something.
When I say: “…..any element onto which you might drop something,” I am referring to the fact that dragging something does not always mean that you will definitely drop it. In most drag and drop scenarios, you have one or more elements to drag, but also multiple places where you may drop them. Therefore, it is most often a good idea to give the user some indication that the element that they are dragging could be dropped in a particular location. Consequently, this involves setting up a hover-like behavior where the droppable element reacts to the fact that a draggable element has been dragged over it, or dragged away from it.
HTML Base
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE HTML> <html> <head> <link href="css/drag-and-drop.css" type="text/css" rel="stylesheet" /> <link href="css/part-ii.css" type="text/css" rel="stylesheet" /> </head> <body> <article> <section id="content"> <div class="drop-elements"> <div class="dropElement droppable"></div> </div> <div class="drag-elements droppable hasChild"> <div id="drag1" class="dragElement redBorder">Drag me!</div> </div> <section> </article> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/part-ii.js"></script> </body> </html> |
In the code example above, we have the base HTML for the rest of the examples in this article. For brevity’s sake, I’ve stripped out all but the most essential areas of the markup so that you can focus on the technologies demonstrated in this article. When you view the page source for the final working example, you will see that there is more HTML, but it is for presentational purposes only.
Example # 1
1 2 3 4 |
//add the dragEnter class to any element that fires a dragenter event $('.droppable').bind('dragenter',function(){ $(this).addClass('dragEnter'); }); |
Here is the JSfiddle link for Example # 1: http://jsfiddle.net/v9hawcof/
The dragenter Event
In Example # 1A, we bind an anonymous function to the dragenter events of the droppable HTML element. In this event handler, we add the class: “dragEnter,” which changes the background color of that element. The reason for doing this is to tell the user: “If you want, you can drop the element that you are dragging.” But if you click the link above for the JSFiddle example, you’ll see that we have a problem. Although we add the dragEnter class when the user drags an element over the droppable element, we have not set a handler for when the user drags that element away; we can’t always assume that the user will drop the dragged element. So, we have to handle the case in which the user drags the element over the droppable element, but does not drop it, and then drags away.
Example # 2
1 2 3 |
$('.droppable').bind('dragleave',function(){ $(this).removeClass('dragEnter'); }); |
The dragleave Event
Here is the JS fiddle link for Example # 2: http://jsfiddle.net/v9hawcof/1/
In Example # 2, we bind an anonymous function to the dragleave event of the droppable element. In that event handler, we simply remove the “dragEnter” class from the droppable element. If you click the jsFiddle link for Example # 2, you’ll see that the user experience is much better; when you drag the small blue box over the larger tan box, the droppable element turns green. So, if you choose not to drop the blue box, and drag it away, the droppable element turns back to tan.
Here is the working example for this article: http://examples.kevinchisholm.com/html5/drag-and-drop/part-ii.html
Here is the JavaScript for this article’s working example:
http://examples.kevinchisholm.com/html5/drag-and-drop/js/part-ii.js
Summary
It is hard to imagine a case in which you would not want to notify the user in some way of the various events that take place during a drag and drop operation. In this article, we focused on the case in which the user drags an element over a droppable one, but does not drop it, and then drags the draggable element away. By attaching event handlers to the dragenter and dragleave events, we have a window of opportunity in which the UI can be updated accordingly. How you prefer to handle the UX in this and similar cases is up to you, but it is an important area to consider.
Helpful Links for HTML5 Drag and Drop dragenter and dragleave Events
dragenter
https://developer.mozilla.org/en-US/docs/Web/Events/dragenter