One of the most compelling uses for jQuery is its ability to enhance the interactivity of next-gen user interface applications. In this arena, several techniques standout, such as the interactions offered by its Draggable, Droppable and Sortable plugins.
According to the jQuery UI website (www.jqueryui.com), the jQuery UI Draggable plugin makes selected elements draggable by mouse. To implement this technique, add the class ui-draggable to the draggable element. During drag, the plugin automatically adds the class ui-draggable-dragging to the desired element. For scripting dragand-drop events, the jQuery UI Droppable plugin provides a drop target for draggable elements.
Extending the power of Draggable, the jQuery UI Droppable plugin makes defined elements “droppable,” allowing them to accept draggable elements.
The action’s callbacks (start, stop, drag) each receive two arguments, including the original browser event and a UI object. These objects include the ui.helper, which is the object representing the element being dragged; ui.position, which provides the current position of the helper, relative to the offset element; and ui.offset, which gives the current absolute position of the helper, relative to the page.
“To manipulate the position of a draggable during drag,” states the jQuery UI website, “you can either use a wrapper as the draggable helper and position the wrapped element with absolute positioning, or you can correct internal values like so: $(this).data(‘draggable’) .offset.click.top -= x.”
Extending the power of Draggable, the jQuery UI Droppable plugin makes defined elements “droppable,” allowing them to accept draggable elements. The plugin allows users to specify individual draggable elements, or types of draggables to accept.
Due to this, the plugin provides an additional callback: ui.draggable, the current draggable element.
There are many applications where the ability to drag and drop page elements is very desirable, but what happens when the order of these elements requires reclassification?
Enter the jQuery UI Sortable plugin, which enables selected elements to be sortable by dragging them with a mouse. As with Droppable, additional callbacks are offered, including ui.item, which is the current dragged element; ui.placeholder (if one is defined); and ui.sender, identifying the sortable element where the item comes from.
While some applications for these technologies may seem overkill for adult, tools such as providing website subscribers with a customizable member’s area or gallery ranking experience will separate one site from its competitors. See how you can make these techniques work for your favorite online project!