Test Case Boilerplate

Fork this way...

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
 <div id='header'>
      <h1>
        <strong>Test</strong>
        <span class='name'>Test Case</span>

      </h1>
    </div>
    <div id='page'>

        <div class="user">
          <div class="name">List A</div>
          <div class="tickets">
            <div class="ticket">List Item</div>
            <div class="ticket">List Item</div>
            <div class="ticket">List Item</div>
            <div class="ticket">List Item</div>
            <div class="ticket">List Item</div>
            <div class="ticket">List Item</div>
            <div class="ticket">List Item</div>
            <div class="ticket">List Item</div>
            <div class="ticket">List Item</div>
            <div class="ticket">List Item</div>
            <div class="ticket">List Item</div>
            <div class="ticket">List Item</div>
            <div class="ticket">List Item</div>
            <div class="ticket">List Item</div>
            <div class="ticket">List Item</div>
            <div class="ticket">List Item</div>
            <div class="ticket">List Item</div>
            <div class="ticket">List Item</div>
            <div class="ticket">List Item</div>
            <div class="ticket">List Item</div>
            <div class="ticket">List Item</div>
            <div class="ticket">List Item</div>
            <div class="ticket">List Item</div>
            <div class="ticket">List Item</div>
          </div>
        </div>
        <div class="user">
          <div class="name">List B</div>
          <div class="tickets">
            <div class="ticket">List Item</div>
            <div class="ticket">List Item</div>
            <div class="ticket">List Item</div>
            <div class="ticket">List Item</div>
            <div class="ticket">List Item</div>
            <div class="ticket">List Item</div>
            <div...

CSS

html, body, div, h1, h2, hr {
  margin: 0; }

a img, hr {
  border: none; }

body {
  background: #dddddd;
  color: #63574e;
  font-family: arial, sans-serif;
  font-size: 13px;
  line-height: 18px; }

#header {
  background: #5a9ecf;
  border-bottom: 6px solid #005588;
  height: 90px;
  position: relative; }

h1 {
  line-height: 26px;
  margin-left: 21px;
  padding-top: 30px; }
  h1 strong {
    color: #006699;
    display: block;
    font-size: 12px;
    font-weight: bold;
    line-height: 100%;
    text-transform: uppercase; }
  h1 .name {
    color: white;
    font-size: 24px;
    font-weight: normal; }

#page {
  padding: 9px 18px; }

.user {
  border-bottom: 5px solid #006699;
  margin: 0 9px 18px 0;
  width: 15.6%; }
  .user .name {
    -webkit-border-top-right-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    background: #006699;
    color: white;
    font-weight: bold;
    line-height: 24px;
    padding: 3px; }
    .user .name img {
      float: left;
      height: 24px;
      margin-right: 6px; }
  .user .tickets {
    background: white;
    font-size: 11px;
    height: 272px;
    overflow: auto; }
  .user .ticket {
    background: white;
    border-bottom: 1px solid #cccccc;
    border-left: 4px solid white;
    line-height: 13px;
    padding: 3px 4px 4px; }
    .user .ticket .project_name {
      font-weight: bold; }
    .user .ticket .number {
      font-weight: bold;
      float: right; }
    .user .ticket .title {
      display: block;
      color: #333333;
      height: 13px;
      overflow: hidden;
      margin-right: 14px; }
  .user .high_priority .ticket {
    background: #fce6e6;
    border-left-color: #e66a6a; }
  .user .medium_priority .ticket {
    border-left-color: #ffb610; }
  .user .low_priority .ticket {
    border-left-color: #69ad73; }
  .user .no_priority .ticket {
    background: #eeeeee;
    border-left-color: #aaaaaa; }
  .user div.priority_label...

JavaScript

$('.tickets').sortable({
    items:       '.ticket',
    cursorAt:    { top:16 },
    tolerance:   'pointer',
    placeholder: 'ui-sortable-placeholder',
    connectWith: '.tickets'
    // start:function(){ page.addClass('dragging'); },
    // over:function(){ user_element   .addClass('dragging_over'); },
    // out:function() { user_element.removeClass('dragging_over'); }
  }).disableSelection();