title: Make a class sortable with other classes named the same, only if they are siblings w/ jquery
body: <h2>Clarification:</h2>
  
  <p>I am trying to make the portlets sortable, but trying to connect them with any columns that are siblings</p>
  
  <hr>
  
  <p>I would like my web-application to automatically apply the <a href="http://jqueryui.com" rel="nofollow"><code>jquery ui</code></a>  <a href="http://jqueryui.com/demos/sortable/1." rel="nofollow"><code>sortable</code></a> interaction to all divs with the class <code>.column</code>.</p>
  
  <p>There are two little tricks that I need in this solution, no its not as simple as <code>$(".column").sortable()</code>...</p>
  
  <ol>
  <li><em>I need the columns to <code>connectWith</code> any other columns that are siblings</em></li>
  <li><em>I would</em> like <em>the solution to apply to any <code>.column</code> elements that are dynamically generated, i've been looking for something similar to my new favorite toy, <a href="http://api.jquery.com/live/" rel="nofollow"><code>.live()</code></a>, to no avail... although a custom event to detect a <code>.column</code> element creation might work, not sure how to do that though.</em></li>
  </ol>
  
  <h2>EX:</h2>
  
  <p><em>markup</em></p>
  
  <pre><code>&lt;div id="container1" class="column-container"&gt;
    &lt;div class="column"&gt;
      &lt;div class="portlet"&gt;&lt;/div&gt;
      &lt;div class="portlet"&gt;&lt;/div&gt;
      &lt;div class="portlet"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;div class="portlet"&gt;&lt;/div&gt;
      &lt;div class="portlet"&gt;&lt;/div&gt;
      &lt;div class="portlet"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;div class="portlet"&gt;&lt;/div&gt;
      &lt;div class="portlet"&gt;&lt;/div&gt;
      &lt;div class="portlet"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
     
        
          
          
          
        
        
          
          
          
        
        
          
          
          
        
      
  
  <p><em>javascript</em></p>
  
  <pre><code>$(document).ready(function(){
    $columns = $(".column");
    $columns.sortable({
      connectWith: $columns.parent().find('.column')  //this untested, but you get the idea... i'll write back with the results of this, might be some good direction
    });
  });
  </code></pre>
  
  <hr>
  
  <p><strong>I would like the columns in <code>container1</code> to be sortable with other columns in <code>container1</code>, but not <code>container2</code>.  Also those in <code>container2</code> w/ <code>container2</code> but not <code>container1</code>.</strong></p>