JQuery_ Novice to Ninja - Earle Castledine [108]
Dragging and dropping is coming of age. It’s always been there in the background, but has felt out of place (and therefore detrimental to a good user experience) next to the mundane text boxes and radio buttons that make up a typical form. But that was the olden days, with olden day forms. Today, if done well, drag and drop can augment forms in a highly usable way, providing a more natural experience that increases productivity. It also supplies a dash of coolness.
If there’s one task that even beginner computer users know how to do, it’s to drag an item to the trash. The metaphor is very satisfying—if you don’t want it, throw it away! On the other hand, the standard web approach—click the checkbox and press delete—is also well known, but far less satisfying. Our client doesn’t want to click checkboxes; he wants to drag stuff to their doom, and have them literally disappear in a puff of smoke to show that it’s truly been destroyed.
Figure 7.8 shows an image thumbnail in mid-destruction. The user has selected a photo and dragged it out of the grid and into the trash. The grid of photos is nothing more than a set of img tags. You can choose any type of element to be draggable, just as long as you can make it look pretty and work well for your users. A nice touch is to set cursor: move on the draggable elements—that way users will see the “grabby hand” icon and know they can drag it.
Figure 7.8. Drag and destroy
As always, we’ll start with the markup:
chapter_07/14_drag_drop/index.html (excerpt)
Drag images here to delete
Important: Progressive Enhancement
For the sake of illustration, we’re including the .trash div in the markup here. However, this poses a problem for users with JavaScript disabled: they’ll see a trash area, but will be unable to do anything with it! In a real-world app, you’d want to start with a fully functional, HTML form-based interface for deleting images (or whatever it is you intend to use drag and drop for). Then, you’d use all the methods we’ve seen throughout the book to remove all those interface elements from the page, and replace them with the above drag and drop markup.
Drag and drop can be a real pain to make work across browsers. Instead of reinventing the wheel, we’ll look to our trusted jQuery companion, jQuery UI. It provides a couple of very handy interaction helpers—draggable and droppable—to handle smooth cross-browser drag and drop.
Note: No Theme Required!
You’ll need to include the jQuery UI library in your page as we’ve covered before, but this time no CSS theme file is required; draggable and droppable are behaviors, with no preset styling necessary. They do, however, give you some quite handy class names to apply your own styles to, which we’ll be looking at very shortly.
Let’s sketch out the basic structure of our interaction code:
chapter_07/14_drag_drop/script.js (excerpt)
$(document).ready(function() {
$('#photo-grid > div').draggable({
revert: 'invalid'
});
$('.trash').droppable({
activeClass: 'highlight',
hoverClass: 'highlight-accept',
drop: function(event, ui) {
puffRemove($(ui.draggable));
}
});
});
function puffRemove(which) {
// Implement the “puff-of-smoke” effect
}
This is the skeleton of our interaction. There’s still a lot we need to do to achieve a nice “puff” animation—but, incredibly, that’s everything we need for drag and drop! Let’s take a closer look at what jQuery UI has given us.
draggable
The draggable interaction helper makes whatever you select draggable with the mouse. Try this out for size: $('p').draggable(). It can make every
tag on the page draggable! Test it out—it’s a lot of fun. Naturally, there are stacks of options and events to customize the behavior. Here are some of the more helpful ones:
$('p').draggable({axis: 'y', containment: 'parent'});
The axis option restricts the object