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.

Let's take a look at the code used to create the three sortable widgets used in each column.

$( ".column" ).sortable({
    items: "> div",
    connectWith: ".column",
    placeholder: "story-placeholder ui-corner-all",
    cursor: "move",
    opacity: 0.8
});

We're selecting based on the column class. This means that we're creating three instances of the sortable widget, all sharing the same options. The options start with items — the child elements that are sortable. By default, these are all the direct children of the widget's element. The only reason we need to be more specific here is that there's an h1 element we don't want being sorted — the column header. The connectWith options specifies all other elements with the class of column. So in other words, the other states in the storyboard. This is how we're able to take one sortable element, and drag it over to another sortable element.

The placeholder option allows us to give the placeholder element a class, or, multiple classes as is the case here. The placeholder element is something created by the widget, and it marks potential drop spots for something that's being dragged. The classes we've specified here give the element a dashed border, and corners to match the stories and defects.

You can also see that the element being dragged in the demonstration is slightly transparent, compared to the other stationary elements. This is controlled by the opacity option. Setting the cursor to move also helps with the user experience by making the icon indicate that they're moving something around.