title: jQuery UI Sortable - ConnectToSortable issue
body: <p>I'm trying to create a drag &amp; drop interface for icons. Basically, I have three div containers, each one with an ordered list inside. The first list holds the icons (as <code>&lt;li&gt;&lt;img /&gt;&lt;/li&gt;</code>), and the two remaining ones are empty and should receive icons being dragged, dropped, and sorted inside of them. Each empty list is associated to a row where the icons will be displayed in the front end.</p>
  
  <p>I have also created a function to allow item selection on Ctrl/Cmd + Left Mouse Click, so that users can drop multiple icons at a time.</p>
  
  <p>Everything works as expected, except for one single issue: the custom Ctrl/Cmd + Click option stops working on draggable elements that have already been dropped.</p>
  
  <p>After realizing, I did some testing and narrowed it down as much as possible: it seems that the culprit is the ConnectToSortable parameter in the 'Draggable' function. If the parameter is commented out, the Ctrl+Click function works as expected. The problem is that I need to use this parameter in order to store all the icons associated to each empty list (row) so I can retrieve them later.</p>
  
  <p>Here is my HTML code:</p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;div id="row1" class="row"&gt;
      &lt;ol class="drop-container"&gt;
          &lt;li class='draggable'&gt;&lt;span class="squares blue-squares"&gt;&amp;nbsp;&lt;/span&gt;&lt;/li&gt;
          &lt;li class='draggable'&gt;&lt;span class="squares blue-squares"&gt;&amp;nbsp;&lt;/span&gt;&lt;/li&gt;
          &lt;li class='draggable'&gt;&lt;span class="squares blue-squares"&gt;&amp;nbsp;&lt;/span&gt;&lt;/li&gt;
      &lt;/ol&gt;
  &lt;/div&gt;
  &lt;div id="row2" class="row"&gt;
      &lt;ol class="drop-container"&gt;
          &lt;li class='draggable'&gt;&lt;span class="squares red-squares"&gt;&amp;nbsp;&lt;/span&gt;&lt;/li&gt;
          &lt;li class='draggable'&gt;&lt;span class="squares red-squares"&gt;&amp;nbsp;&lt;/span&gt;&lt;/li&gt;
          &lt;li class='draggable'&gt;&lt;span class="squares red-squares"&gt;&amp;nbsp;&lt;/span&gt;&lt;/li&gt;
      &lt;/ol&gt;
  &lt;/div&gt;
  &lt;div id="row3" class="row"&gt;
      &lt;ol class="drop-container"&gt;
          &lt;li class='draggable'&gt;&lt;span class="squares green-squares"&gt;&amp;nbsp;&lt;/span&gt;&lt;/li&gt;
          &lt;li class='draggable'&gt;&lt;span class="squares green-squares"&gt;&amp;nbsp;&lt;/span&gt;&lt;/li&gt;
          &lt;li class='draggable'&gt;&lt;span class="squares green-squares"&gt;&amp;nbsp;&lt;/span&gt;&lt;/li&gt;
      &lt;/ol&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>​</p>
  
  <p>And Here is my JS code:</p>
  
  <pre><code>$(function() {
  // Custom function for Ctrl-Cmd Left Mouse Click
  $(".draggable, .ui-draggable").click(function(e) {
      if (e.ctrlKey || e.metaKey === true) {
          if (!$(this).hasClass("selected")) {
              $(this).addClass("selected");
          } else {
              $(this).removeClass("selected");
          }
      }
  });
  // Draggable
  $('.draggable').draggable({
      connectToSortable: ".drop-container",
      delay: 200,
      drag: function(event, ui) {
          $(".selected").removeClass("selected");
      },
      helper: "original",
      revert: "invalid",
      revertDuration: 300
  });
  // Droppable
  $('.drop-container').droppable({
      tolerance: "touch"
  });
  // Sortable
  $('.drop-container').sortable({
      appendTo: ".drop-container",
      connectWith: ".drop-container",
      items: ".draggable",
      revert: true
  });
  // Disable selection of items
  $("div, ol, ul, li, span").disableSelection();
  });​
  </code></pre>
  
  <p>I made a <a href="http://jsfiddle.net/SWJ7D/81/" rel="nofollow">JSfiddle</a> to test this, and I was able to reproduce the error. I am using spans instead of actual images for the purposes of this test.</p>
  
  <p>Am I doing something wrong or is this a jQuery UI bug? Any ideas or workarounds are most welcome and appreciated!</p>