title: jQuery Sortable - drag and drop multiple items
body: <p>I have the following code, which allows user to drag and drop from one list to another. Now, how can I allow the user to select and drag &amp; drop multiple items?</p>
  
  <p>Something like this?
  <a href="http://jsfiddle.net/T68Fn/" rel="nofollow">http://jsfiddle.net/T68Fn/</a></p>
  
  <p>I have tried to incorporate the code from the jsfiddle in, but can't really get it to work. Any help is highly appreciated.</p>
  
  <p>Please help me out. Thank you very much.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt;
  &lt;head&gt;
  &lt;script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="maincontainer"&gt;
     &lt;div id="navtoplistline"&gt;&amp;nbsp;&lt;/div&gt;
        &lt;div id="contentwrapper"&gt;
          &lt;div id="maincolumn"&gt;
             &lt;div class="text"&gt;
              &lt;hr /&gt;
              &lt;div class="listBlock"&gt;
                      &lt;h2&gt;Available&lt;/h2&gt;
  
                  &lt;ul id="sortable1" class='droptrue'&gt;
                      &lt;li class="ui-state-default" id="article_1"&gt;Article #1&lt;/li&gt;
                      &lt;li class="ui-state-default" id="article_2"&gt;Article #2&lt;/li&gt;
                      &lt;li class="ui-state-default" id="article_3"&gt;Article #3&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="listBlock"&gt;
                      &lt;h2&gt;My Articles&lt;/h2&gt;
  
                  &lt;ul id="sortable2" class='droptrue'&gt;&lt;/ul&gt;
              &lt;/div&gt;
              &lt;br clear="both" /&gt;
              &lt;p&gt;Which articles, in which order?:
                  &lt;br /&gt;
                  &lt;input type="text" id="postOrder" name="postOrder" value="" size="30" /&gt;
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.listBlock {
    float: left;
  }
  #sortable1, #sortable2 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-right: 100px;
    background: #eee;
    padding: 5px;
    width: 300px;
    border: 1px solid black;
  }
  #sortable1 li, #sortable2 li {
    cursor: move;
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 250px;
    background: none;
    background-color: white;
  }
  </code></pre>
  
  <p>SCRIPT</p>
  
  <pre><code>    $(function() {
          $("ul.droptrue").sortable({
              connectWith: 'ul',
              opacity: 0.6,
              update : updatePostOrder
          });
  
          $("#sortable1, #sortable2").disableSelection();
          $("#sortable1, #sortable2").css('minHeight',$("#sortable1").height()+"px");
          updatePostOrder();
      });
  
      function updatePostOrder() { 
          var arr = [];
        $("#sortable2 li").each(function(){
          arr.push($(this).attr('id'));
        });
        $('#postOrder').val(arr.join(','));
    }
  </code></pre>