jQuery Sortable for Two Column reordering?

Question

Hey all. Here is the scenario. I have the below code, and I'm needing to rearrange the items within these columns. The problem is...the items don't necessarily need to remain within their containing column, they need to be able to be switched back and forth, depending on the user. Here is the sample code:

<div id="container">
    <div id="left-col">
     <div class="wrapper">
      <div class="item">
       <h2>Row 1 Column 1</h2>
       <p>Lorem ipsum dolor sit amet</p>
       <p>Lorem ipsum dolor sit amet</p>
       <p>Lorem ipsum dolor sit amet</p>
       <p>Lorem ipsum dolor sit amet</p>
       <p>Lorem ipsum dolor sit amet</p>
      </div>
     </div>
     <div class="wrapper">
      <div class="item">
       <h2>Row 2 Column 1</h2>
       <p>Lorem ipsum dolor sit amet</p>
       <p>Lorem ipsum dolor sit amet</p>
       <p>Lorem ipsum dolor sit amet</p>
      </div>
     </div>
    </div><!-- end left-col -->
    <div id="right-col">
     <div class="wrapper">
      <div class="item">
       <h2>Row 1 Column 2</h2>
       <p>Lorem ipsum dolor sit amet</p>
       <p>Lorem ipsum dolor sit amet</p>
      </div>
     </div>
     <div class="wrapper"> 
      <div class="item">
       <h2>Row 2 Column 2</h2>
       <p>Lorem ipsum dolor sit amet</p>
       <p>Lorem ipsum dolor sit amet</p>
       <p>Lorem ipsum dolor sit amet</p>
       <p>Lorem ipsum dolor sit amet</p>
      </div>
     </div>
    </div><!-- end right-col -->
</div>

And the associated CSS:

#container {
      border: 1px solid black;
      overflow: hidden;
      margin: auto;
     }
     #container .wrapper {
      width: 100%;
     }
     #container #left-col .item {
      margin: .5em .25em .5em .5em;
      border: 1px solid black;
     }
     #container #right-col .item {
      margin: .5em .5em .5em .25em;
      border: 1px solid black;
     }
     #left-col, #right-col { width: 50%; }
     #left-col { float: left; }
     #right-col { float: right; }
     .item h2 { background: #ccc; }

I was wondering if it was possible to use the jQuery sortable plugin to sort/order wrapper elements in the code, or if I would have to roll my own solution. The plugin could work if I was wanting to sort the elements within the left or the right column, but not between each other. Any help would be greatly appreciated.

Answer 1

The TableSorter plugin should do what you need. It only works with tables, but it is very flexible; it even has special handling for numbers. I am currently using it in a project I am working on.

http://www.tablesorter.com/

Answer 2

The jQuery UI Sortable should allow you to move items up and down within a column:

http://jqueryui.com/demos/sortable/

It's a little confusing because the jQuery site also has a Sortable page, with a demo that currently doesn't appear to work.

You might also need the jQuery UI Droppable:

http://jqueryui.com/demos/droppable/

The Droppable will allow you to drag and drop from one column to the other. Here is the link for Droppable on the jQuery site (this demo does work):

http://docs.jquery.com/UI/API/1.7/Droppable

Answer 3

If you are going to go with a drag/drop solution, threedubmedia has a much faster, less bloated version than the jQuery UI library.

My demo is here. You can move the names between the lists but it does not sort within a list. That should be an easy change to make though.

Answer 4

Check out this several part tutorial. This is a good tutorial that provides a solution that can be applied to any list of elements with just the base JQuery library (no plug-ins required). It also shows you how to optimize the client side sorting to be lightning fast by pre-computing the sort keys. I hope this helps.

Answer 5

Turns out there is an easier solution. With the help of Robert and the links he provided, this solution works fine:

$(function() {
    $("#left-col").sortable({
        handle: '.item h2',
        connectWith: '#right-col'
    }).disableSelection();
    $("#right-col").sortable({
        handle: '.item h2',
        connectWith: '#left-col'
    }).disableSelection();
});

As stated earlier, with sortable, I could sort each item within its respected column, but it couldn't be "dropped" over the the opposite column. With the connectWith attribute on the sortable plugin, you can specify another sortable object that you want to be able to sort with. Thanks for all the help.