Make a class sortable with other classes named the same, only if they are siblings w/ jquery

Question

Clarification:

I am trying to make the portlets sortable, but trying to connect them with any columns that are siblings

---

I would like my web-application to automatically apply the jquery ui sortable interaction to all divs with the class .column.

There are two little tricks that I need in this solution, no its not as simple as $(".column").sortable()...

1. I need the columns to connectWith any other columns that are siblings
2. I would like the solution to apply to any .column elements that are dynamically generated, i've been looking for something similar to my new favorite toy, .live(), to no avail... although a custom event to detect a .column element creation might work, not sure how to do that though.

EX:

markup

<div id="container1" class="column-container">
  <div class="column">
    <div class="portlet"></div>
    <div class="portlet"></div>
    <div class="portlet"></div>
  </div>
  <div class="column">
    <div class="portlet"></div>
    <div class="portlet"></div>
    <div class="portlet"></div>
  </div>
  <div class="column">
    <div class="portlet"></div>
    <div class="portlet"></div>
    <div class="portlet"></div>
  </div>
</div>

javascript

$(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
  });
});

---

I would like the columns in container1 to be sortable with other columns in container1, but not container2. Also those in container2 w/ container2 but not container1.

Answer 1

From what I understand this is easier than you are making it.

For the sortable columns within a container, from your markup, the jquery activation would be:

$('.column-container').sortable();

The selector you currently have on your sortable would actually make the portlets sortable.

As for the live events, refer to this earlier question: live drag and drop

EDIT:

After your comment, the selector would be:

$('.column-container').sortable({items: '.portlet'});

EDIT 2: Since it is still not working here is the full example:

    <style type="text/css">
        .column-container { width: 100%; }
        .column-container .column { float: left; width: 100px; background: #ccc; margin-left: 10px; }
        .column-container .column .portlet { border: 1px solid black; padding: 2px; margin: 2px; }
    </style>
    <script type="text/javascript">
        $(function () {
            $('.column-container').sortable({items: '.portlet'});
        });
    </script>
    <div id="container1" class="column-container">
        <div class="column">
            <div class="portlet">#container1 .column[0] .portlet[0]</div>
            <div class="portlet">#container1 .column[0] .portlet[1]</div>
            <div class="portlet">#container1 .column[0] .portlet[2]</div>
        </div>
        <div class="column">
            <div class="portlet">#container1 .column[1] .portlet[0]</div>
            <div class="portlet">#container1 .column[1] .portlet[1]</div>
            <div class="portlet">#container1 .column[1] .portlet[2]</div>
        </div>
        <div class="column">
            <div class="portlet">#container1 .column[2] .portlet[0]</div>
            <div class="portlet">#container1 .column[2] .portlet[1]</div>
            <div class="portlet">#container1 .column[2] .portlet[2]</div>
        </div>
    </div>
    <div style="clear:both"></div><br />
    <div id="container2" class="column-container">
        <div class="column">
            <div class="portlet">#container2 .column[0] .portlet[0]</div>
            <div class="portlet">#container2 .column[0] .portlet[1]</div>
            <div class="portlet">#container2 .column[0] .portlet[2]</div>
        </div>
        <div class="column">
            <div class="portlet">#container2 .column[1] .portlet[0]</div>
            <div class="portlet">#container2 .column[1] .portlet[1]</div>
            <div class="portlet">#container2 .column[1] .portlet[2]</div>
        </div>
        <div class="column">
            <div class="portlet">#container2 .column[2] .portlet[0]</div>
            <div class="portlet">#container2 .column[2] .portlet[1]</div>
            <div class="portlet">#container2 .column[2] .portlet[2]</div>
        </div>
    </div>

Answer 2

This solution works when applying an ID to the parent, i'll see if i can't rig up a more flexible solution.

markup:

<div id="container1" class="column-container">
  <div class="column">
    <div class="portlet"></div>
    <div class="portlet"></div>
    <div class="portlet"></div>
  </div>
  <div class="column">
    <div class="portlet"></div>
    <div class="portlet"></div>
    <div class="portlet"></div>
  </div>
  <div class="column">
    <div class="portlet"></div>
    <div class="portlet"></div>
    <div class="portlet"></div>
  </div>
</div>

javascript:

//connects with `#container1 .column` and `#container2 .column`
$('.column').sortable({
  connectWith: $(this).parent().attr('id') + ' .column'
});

Paired With

This live jquery draggable extension found in this question

(function ($) {
   jQuery.fn.liveDraggable = function (opts) {
      this.live("mouseover", function() {
         if (!$(this).data("init")) {
            $(this).data("init", true).draggable(opts);
         }
      });
   };
})(jQuery);