title: jQueryUI disable / cancel icon from being dragged in a sortable list?
body: <p>I am having difficulty trying to disable the list elements from being dragged by the icon.</p>
  
  <p>Each li has an icon, when clicked either removes or adds it into another list. However if you drag by its icon it removes or adds the item.</p>
  
  <p>I want to be able to drag the li around, but stop the icons from being dragable on the li's.</p>
  
  <p>I have a demo:
  <a href="http://jsfiddle.net/w3vvL/27/" rel="nofollow">http://jsfiddle.net/w3vvL/27/</a></p>
  
  <p>I have tried a number of things with no success and I cant figure it out: - </p>
  
  <pre><code>    $( "#gallery li" ).draggable({
            cancel: "a.ui-icon",
            revert: "invalid",
            containment: "document",
            helper: "clone",
            cursor: "move"
          });
      $( ".ui-icon" ).disableSelection();
  
      //Get Dropped Item
      $("#trash").droppable({
           drop: function(event, ui) {
      $(ui.draggable).stop();
  
                 }
      });
  </code></pre>
  
  <p>Any help would be greatly appreciated!</p>