A Sortable Storyboard

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

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/overcast/jquery-ui.css">
<table border="1" width="100%">
    <tr>
        <td>
<div class="column ui-widget ui-widget-content ui-corner-all">
    <h1>User Story</h1>
    <div class="story ui-state-error ui-corner-all" id="story1">   </div>
    <div class="story ui-state-default ui-corner-all" id="story2"></div>
            </div>
<div class="column ui-widget ui-widget-content ui-corner-all">
    <h1>Not Started</h1>
    <div class="story ui-state-default ui-corner-all" id="NotStr1"></div>

    
            </div>
<div class="column ui-widget ui-widget-content ui-corner-all">
    <h1>In Progress</h1>
    <div class="story ui-state-default ui-corner-all" id="tdInProcess" ></div>
    <div class="story ui-state-default ui-corner-all"></div>
            </div>

<div class="column ui-widget ui-widget-content ui-corner-all">
    <h1>Completed</h1>
    <div class="story ui-state-default ui-corner-all"></div>
    <div class="story ui-state-default ui-corner-all"> </div>
    <div class="story ui-state-default ui-corner-all"></div>
            </div>

  
                    
        </td>
    </tr>
            </table>         
       <table width="100%">
           <tr>
           <td class="ui-corner-all ui-corner-bottom ui-corner-right ui-corner-br story"  id="tdCompleted"></td></tr>
      <tr><td height="30px" bgcolor="Gainsboro" id="tdPendingColor">Pending :</td><td bgcolor="Gainsboro" id="tdCompletedColor">Completed : </td></tr>
</table>
            
        
<script>
    var jsonInput = {"tasks":[{"id":"101","name":"US01_T01","status":"1-ToDo","pending_hours":"5"},{"id":"102","name":"US01_T02","status":"In-Process","pending_hours":"3"},{"id":"103","name":"US01_T01","status":"Completed","pending_hours":"0"}]};
var jsonPerfectInput =...

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
});