CodePen

HTML

            
              <div class="wrapper">
  <ul id="peg-1" class="peg droptrue">
    <li class="disk" id="disk-1" data-disk=1></li>
    <li class="disk" id="disk-2" data-disk=2></li>
    <li class="disk" id="disk-3" data-disk=3></li>
  </ul>
  <ul id="peg-2" class="peg droptrue">
    <li class="empty-slot"></li>
    <li class="empty-slot"></li>
    <li class="empty-slot"></li>
  </ul>
  <ul id="peg-3" class="peg droptrue">
  </ul>
</div>
            
          
!
via HTML Inspector

CSS

            
              .wrapper {
  width: 90%;
  min-width: 910px;
  height: 235px;
  margin: 0 auto;
  box-sizing: border-box;
  .peg {
    width: 33%;
    height: 100%;
    padding: 0;
    background: #ddd;
    display: inline-block;
    box-sizing: border-box;
    list-style: none; 
    .disk {
      vertical-align: bottom;
      height: 33%;
      background: gold;
      border: 1px dotted green;
      border-radius: 15px 15px 0 0;
      box-sizing: border-box;
      margin: 0 auto;
    }
    
    .disk:active {
      box-shadow: 1px 1px 10px #000;
    }
    
    #disk-1 {
      width: 50%;
    }
    #disk-2 {
      width: 75%;
    }
    #disk-3 {
      width: 100%;
    }
    .empty-slot {
      height: 33%;
      box-sizing: border-box;
    }
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(function () {
  $('ul.peg').sortable({
    connectWith : 'ul',
    sort : function (ui, event) {
      console.log(ui);
    }
  });
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................