jQuery UI Draggable Icons
I’ve recently been working with jQuery UI draggable and droppable components and while the functionality is great and easy to implement, drag-and-drop does present a potential usability problem: drag-and-drop components are not yet in widespread use on the web and the average web surfer will not be expecting to discover them on your web site. Because of this, drag-and-drop components could get overlooked completely. How do we solve the problem?
Users need a hint
We could provide text instructions on the page, explaining which objects are draggable and what to do with them, but we all know that people don’t read on the web; they scan. So, let’s give visitors a visual cue to help them quickly identify draggable components.
The icons
I’ve created a draggable icon to help address the problem. Actually, there are two icons: one for use on light backgrounds and another for dark backgrounds. The icons are 16 × 16 pixel PNG images with alpha transparency. Here’s the quick preview:
|
|
You can see the draggable icons in action on the example page.
Making use of the icons
In the example, I put the icons to use as background images in the headers of my draggable boxes. Here is the HTML:
<div class="draggable dark">
<h3 class="title">Dark background</h3>
</div>
In the CSS, .draggable h3 gets the background image and is assigned a 24 pixel left padding. Its line height is also set to 24 pixels and the icon is positioned 4 pixels from the top of it’s containing h3 tag in order to keep everything vertically aligned. Here is that bit of CSS:
.dark h3.title {
background: #36c url(../images/icon_draggable_dark.png) no-repeat 2px 4px;
color: #fff;
font-size: 12px;
font-weight: bold;
line-height: 24px;
margin: 0;
padding-left: 24px;
}
Note: line-height and padding-left should be set to at least 16 pixels each in order to display the full icon.
Also note that the draggable boxes have been assigned cursor: pointer in their CSS styles in order to display the pointing hand cursor when a user hovers over them. [Update: The cursor style has now been changed to "move". This is the better option and one I had previously overlooked.] This helps to indicate that the draggable box is an actionable object. Without this style, the default cursor in our example would have been the text selector, which is less suited to the functionality we are trying to emphasize.
License
The jQuery UI draggable icons are free and licensed under both the GPL and MIT licenses—the same licensing used for the jQuery JavaScript library itself. Basically, you can put the icons to any use you wish, whether personal or commercial, and you won’t have to jump through any special hoops in order to do so.
Download
Clicking the “Get the icons” button below will download a ZIP file containing the two icons as PNG files, a copy of the working example code, the MIT and GPL licenses and a layered PSD source file, which is useful if you wish to customize the icon images in some way.