A Sortable Storyboard

Using jQuery UI and the sortable widget to implement a sortable storyboard.

by Adam Boduch

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/overcast/jquery-ui.css">
<div class="column ui-widget ui-widget-content ui-corner-all">
    <h1>In Progress</h1>
    <div class="story ui-state-error ui-corner-all">Defect 1</div>
    <div class="story ui-state-default ui-corner-all">Story 5</div>
</div>
<div class="column ui-widget ui-widget-content ui-corner-all">
    <h1>Testing</h1>
    <div class="story ui-state-default ui-corner-all">Story 1</div>
    <div class="story ui-state-default ui-corner-all">Story 2</div>
    <div class="story ui-state-error ui-corner-all">Defect 3</div>
</div>
<div class="column ui-widget ui-widget-content ui-corner-all">
    <h1>Complete</h1>
    <div class="story ui-state-default ui-corner-all">Story 3</div>
    <div class="story ui-state-error ui-corner-all">Defect 2</div>
    <div class="story ui-state-default ui-corner-all">Story 4</div>
</div>

CSS

body {
    font-size: 0.8em;
}

.column {
    width: 10em;
    height: 22em;
    float: left;
    text-align: center;
    padding: 0.3em;
    margin: 0.2em;
}

.column h1 {
    font-size: 1em;
}

.story {
    line-height: 2em;
    vertical-align: middle;
    margin: 0.3em 0;
}

.story-placeholder {
    border-style: dashed;
    border-width: 1px;
    border-color: inherit;
    height: 2em;
}

/*
 * Theme overrides...
 *
 */
.ui-widget-content,
.ui-state-default, 
.ui-state-error,
.ui-widget-content .ui-state-default,
.ui-widget-content .ui-state-error {
    background-image: none;
    font-weight: normal;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 4px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 4px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 4px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 4px;
}

JavaScript

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