educational

JQuery Lets Users Drag, Drop, Sort

Stephen Yagielowicz

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!

Related:  

More Articles

educational

S2S Postbacks: Getting Ad Stats in 1 Place

Juicy Jay ·
opinion

Tips to Master Customer Subscription Retention

Cathy Beardsley ·
opinion

A Primer on How to Integrate Paysite Processing

Jonathan Corona ·
educational

Trademark Ruling a Victory for Adult Products, Services

Marc Randazza ·
profile

Q&A: Rich Girls CEO Cristina Enriches Cam Models

Alejandro Freixes ·
profile

Q&A: LiviaChoice Embraces Grand Camming Destiny

Alejandro Freixes ·
opinion

Refined Protocols Reduce STI Risks for Performers

Eric Paul Leue ·
educational

Camming 101: Establish Boundaries to Keep the Fantasy Alive

Steve Hamilton ·
profile

Nikki Night Forges Cam Model Excellence

Alejandro Freixes ·
educational

Ethical Camming Inspires a Cultural Revolution

Mia Saldarriaga ·
Show More