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 class="element_container">
        <div class="element_to_move" id="765723"   style="margin-left:76px;width:60px;"><div class="element_head"></div><div class="element_duration"></div><div class="element_edit"></div></div>
        <div class="element_to_move" id="75786"   style="margin-left:180px;width:48px;"><div class="element_head"></div><div class="element_duration"></div><div class="element_edit"></div></div>
        <div class="element_to_move" id="723489"   style="margin-left:280px;width:36px;"><div class="element_head"></div><div class="element_duration"></div><div class="element_edit"></div></div>
        <div class="element_to_move" id="7020283"   style="margin-left:380px;width:38px;"><div class="element_head"></div><div class="element_duration"></div><div class="element_edit"></div></div>
        <div class="element_to_move" id="78769884"   style="margin-left:480px;width:58px;"><div class="element_head"></div><div class="element_duration"></div><div class="element_edit"></div></div>
        <div class="element_to_move" id="745379"   style="margin-left:580px;width:42px;"><div class="element_head"></div><div class="element_duration"></div><div class="element_edit"></div></div>
      </div>
  
  <div id="er2" style="font-family:'Arial';width:150%;float:left;margin-top:100px;"></div>

CSS

article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
.element_container{
    background-color:#A1A1A1;
    width:672px;
    height:60px;
    margin:0px 0px 0px 0px;
    overflow:hidden;
    float:left;
  }
  .element_to_move{
    text-align:center;
    margin:5px 0px 5px 0px;
    width:48px;
    height:50px;
    background-color:#FFFFFF;
    font-size:9px;
    line-height:10px;
    cursor:pointer;
    position:absolute;
  }
  .element_head{
    color:#FFFFFF;
    background-color:#2358C7;
    height:20px;
    width:100%;
  }
  .element_duration{
    margin:0px 0px 0px 0px;
    color:#2358C7;
    height:20px;
    width:100%;
  }
  .element_edit{
    margin:0px 0px 0px 0px;
    height:10px;
    background-color:#128F03;
    width:100%;
    color:#FFFFFF;
  }

JavaScript

$('.element_to_move').draggable({
        containment: 'parent',
        cursor: 'pointer',
        scroll: true,
        axis: 'x' ,
        grid: [1,0],
        start: function(event, ui) {          
          // Update element data in Display
          console.log('[start]--ui.p.l('+ui.position.left+')ui.o.l('+ui.offset.left+')<br />');
        },        
        drag: function(event, ui) {          
          // Update element data in Display
          console.log('[drag]--ui.p.l('+ui.position.left+')ui.o.l('+ui.offset.left+')<br />');
        },
        stop: function(event, ui){
          // Update element data in Display
          console.log('[stop]--ui.p.l('+ui.position.left+')ui.o.l('+ui.offset.left+')<br />');
        }
});