jQuery UI: Sortable 3D CSS

The jQuery UI sortable widget allows the user to pick an item up, and drop it in another location. It's kinda like the draggable widget and in fact, uses the draggable widget to implement the draggable behaviour. A key difference, however, is that sortable will shuffle the other items around as the item is dragged, and after it's dropped. It re-sorts the items. The only style changes applied to the item that's being moved is it's position. We can use some fancy 3D CSS to make the item stand out even more when it's being dragged.

jQuery UI: Containing Sortables

The sortable widget has an option called containment. This means that when the user picks up a sortable item with the mouse, the movement is constrained by this option value. By default, there is no such restriction in place — the user is free to move the item around on the page. This can lead to problems in understanding what they're actually supposed to do with the item. For example, basic sortables mean taking an li element, and moving it around in the parent ul element. If the user can drag the element anywhere on the page, and there's nowhere to drop it, that's not an ideal experience.

A Sortable Storyboard

The sortable widget can do a lot. And with very little effort, despite the numerous options available. For example, you can use it to implement a basic scrum storyboard. This demo isn't necessarily unique to scrum, sorting elements between categorized columns has many uses. The really interesting thing about this code is how little of it there is. Once you have the markup structured in a logical and sane way, you can write a little CSS to get your basic alignment right. Then you let the jQuery UI theme framework do the heavy lifting. Your only job is to then is to add classes to the elements. The sortable interaction widget handles the dragging of stories and defects between the various states, or, the columns.

jQuery UI: Sorting Between Tables

The jQuery UI sortable interaction widget has an option called connectWith. This option let's us connect our sortable instances with other sortables. That is, not only can you drag elements to sort them within the primary sortable, but you can drag them into the connected sortable. This setup can work bidirectionally too — you can drag the item back to the original sortable after it's been moved out. This drag and drop behavior, I've found, to be especially useful for connecting table data.

jQuery UI: Sortable Rearrange Effects

The sortable widget, provided by jQuery UI, allows users to visually sort elements. It's easy for the programmer to implement too, since we need only call the sortable constructor on some container element. This let's the user sort the child elements by dragging them around. During this process of rearranging the sortable elements, can we alter the visual presentation of the elements, as they're moved about? In other words, can we apply subtle visual effects to the items as they're rearranged?

jQuery UI: Sortable Accordion Sections

Using a fixed ordering for your accordion sections is all well and good, but why not let the user sort the sections themselves? Seems like a good idea to me — especially with the help of sortable, it should be a straightforward customization of the accordion widget to enable this behavior. There is, however, one gotcha that makes this customization nontrivial. The DOM structure of the accordion section has a header, followed by the content div. How should we make sortable deal with that?

jQuery UI: Preserving Sortables

The sortable interaction widget let's the user arrange a list of items. Which is great, except for when you want to preserve the order of those items. As soon as you reload the page, the order is gone. That is, of course, unless you're storing the order as part of the application somewhere. But if you just want to create a sortable that preserves the order using the cookie plugin, here is how you can do that. This is my basic sortable list.