Sortable Handle - Child Element Only?

Sortable Handle - Child Element Only?

Hi,
 
I'm trying to set a Handle for my Sortable List.
 
I know that you need to use handle : '.handle', and give something a class name with handle. However, while this works, the rest of the LI still shows the default drag icon, rather than limiting it to just the specifed handle.
 
Any idea what I need to change?
 
  1. <div id="example-1-4">
  2.     <div id="containment">
  3.      <div class="column left first">
  4.        <ul class="sortable-list">
          <li class="sortable-item" id="A"> <img src="move.png" class="handle" alt="move" /> Sortable item A</li>
          <li class="sortable-item" id="B">  <img src="move.png" class="handle" alt="move" /> Sortable item B</li>
         </ul>


  5.      </div>
  6.      <div class="column left">
  7.        <ul class="sortable-list">
          <li class="sortable-item" id="C"> <img src="move.png" class="handle" alt="move" /> Sortable item C</li>
          <li class="sortable-item" id="D"> <img src="move.png" class="handle" alt="move" /> Sortable item D</li>
         </ul>


  8.      </div>
  9.      <div class="column left">
  10.      <ul class="sortable-list">
          <li class="sortable-item" id="E"> <img src="move.png" class="handle" alt="move" /> Sortable item E</li>
         </ul>

  11.      </div>
  12.      <div class="clearer">&nbsp;</div>
  14. <!-- Example JavaScript files -->
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.custom.min.js"></script>
    <script type="text/javascript" src="jquery.cookie.js"></script>
    <!-- Example jQuery code (JavaScript)  -->
    <script type="text/javascript">




  15. $(document).ready(function(){
     
       // Get items
     function getItems(exampleNr)
     {
      var columns = [];




  16.   $(exampleNr + ' ul.sortable-list').each(function(){
       columns.push($(this).sortable('toArray').join(','));    
      });

  17.   return columns.join('|');
     }
  18.  // Load items from cookie
     function loadItemsFromCookie(name)
     {
      if ( $.cookie(name) != null )
      {
       renderItems($.cookie(name));
      }
      else
      {
       
      }
     }










  19.  // Render items
     function renderItems(items)
     {
      var html = '';
     
      var columns = items.split('|');
      
      for ( var c in columns )
      {
       html += '<div class="column left';








  20.    if ( c == 0 )
       {
        html += ' first';
       }


  21.    html += '"><ul class="sortable-list">';
  22.    if ( columns[c] != '' )
       {
        var items = columns[c].split(',');

  23.     for ( var i in items )
        {
         html += '<li class="sortable-item" id="' + items[i] + '">Sortable item ' + items[i] + '</li>';
        }
       }



  24.    html += '</ul></div>';
      }
  25.   $('#containment').html(html);
     }
     
      // load positions form cookies
      $('#example-1-4 .sortable-list').each( function( index ){
     loadItemsFromCookie('welling');
      });





  26.  // Example 1.4: Sortable and connectable lists (within containment)
     $('#example-1-4 .sortable-list').sortable({
     handle : '.handle',
            connectWith: '#example-1-4 .sortable-list',
            containment: '#containment' ,
            update: function(){
                $.cookie('welling', getItems('#example-1-4'), {expires: 999});
            }
        });







  27. });
  28. </script>