title: jquery sortable keep within container Boundary
body: <p>Please look at the fiddle below:</p>
  
  <p><a href="http://jsfiddle.net/ujdsu/" rel="noreferrer">http://jsfiddle.net/ujdsu/</a></p>
  
  <p>HTML, simple unordered list:</p>
  
  <pre><code>&lt;ul class="sortable"&gt;
      &lt;li&gt;first item&lt;/li&gt;
      &lt;li&gt;second item&lt;/li&gt;
      &lt;li&gt;third item&lt;/li&gt;
      &lt;li&gt;fourth item&lt;/li&gt;
      &lt;li&gt;fifth item&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>jquery:</p>
  
  <pre><code>$(function() {      
     $( ".sortable" ).sortable({
         axis: 'y' 
     }).disableSelection();
  });​
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>ul{
      margin:20px 0 0 20px;
      border:1px solid #000;
      width:70%;
      overflow:hidden;
      position:relative;
  }
  li{
      background:#ccc;
      border-top:1px solid #000;
      padding:10px 5px;
      cursor:move;
  }   
  li:first-child{
      border-top:0;
  }
  </code></pre>
  
  <p>​</p>
  
  <p>By Default you can drag an item outside its container. I've sort of fixed this by adding "overflow:hidden" to the container, however, you can still drag an item outside the container, you just wont see the part that's outside.. look at the screen shot below:</p>
  
  <p><img src="https://i.stack.imgur.com/fvxl3.gif" alt="enter image description here"></p>
  
  <p>What I want to achieve is for the user to not be able to move the item any further as soon as it hits the top or bottom edge of the container, so you wouldn't see the result shown in the screenshot above. Ideally "third item" would hit the top edge and wouldn't move any further.</p>
  
  <p>Thanks</p>