Working with multi-column sortable Items in jQuery

Question

Here's my dilemma - I have a two-column list of elements (styled <div>s) that I need to make sortable. With elements that live in one or the other column, this is easy - I just set up two columns, place my elements where they need to be initially, mark them as "sortable," and let jQuery do its magic.

However, I have two elements in the list that need to span both columns. This, unfortunately, breaks the usability of the model. If I stick with my standard 2-column setup, I run into situations where the wide elements overlap or underlap with elements in the other column.

I also tried iterating through both columns to reposition elements so there would be no overlap, but then I realized another issue: my second column (on the right) has no knowledge of the elements positioned in the first column (on the left).

Here's a stripped down example of my markup:

<div id="wrapper">
    <div id="column-1" class="column" style="width:400px;">
        <div id="item-1" class="item" style="width:200px;">
        ...
        </div>
        <div id="item-2" class="item wide" style="width:400px;">
        ...
        </div>
        <div id="item-3" class="item" style="width:200px;">
        ...
        </div>
    </div>
    <div id="column-2" class="column">
        <div id="item-4" class="item" style="width:200px;">
        ...
        </div>
        <div id="item-5" class="item" style="width:200px;">
        ...
        </div>
    </div>
</div>

The way this should line up is something like this table:

-------------------
| item 1 | item 4 |
|      item 2     |
| item 3 | item 5 |
-------------------

And each item can be dragged and dropped anywhere else, with items 1, 3, 4, 5 moving interchangeably between the two columns, and with item 2 moving up and down as necessary. Realistically, you should also be able to end up with something like this:

-------------------
| item 1 |        |
|      item 2     |
| item 3 | item 5 |
| item 4 |        |
-------------------

But with a standard column model (i.e. the stock jQuery examples, the only resources I can find from several days of Google searches, and every attempt I've made thus far) this won't work.

So what can I do to implement this kind of layout with the jQuery UI Sortable plug-in so I can continue building my UI?

Answer 1

I invested more time and have hacked my way through to one possible solution. It still has its problems, but I'm at least getting most of the functionality I need.

The trick is to create multiple sortable elements and to nest them. So my document structure becomes:

<div id="wrapper">
<div id="macro-section-1" class="macro fixed" style="width:400px">
    <div class="column" style="width:400px;">
        <div id="item-1" class="item" style="width:200px;">
            ...
        </div>
    </div>
    <div class="column">
        <div id="item-4" class="item" style="width:200px;">
        ...
        </div>
    </div>
</div>
<div id="item-2" class="item wide macro mobile" style="width:400px;">
....
</div>
<div id="macro-section-2" class="macro fixed" style="width:400px;">
    <div class="column" style="width:400px;">
        <div id="item-3" class="item" style="width:200px;">
        ...
        </div>
    </div>
    <div class="column">
        <div id="item-5" class="item" style="width:200px;">
        ...
        </div>
    </div>
</div>
</div>

Then, you instantiate 2 different sortables - one to sort the smaller 1-column elements among themselves and the other to sort the 1-column "macro" elements. Note that there are 3 macro elements on this page:

1. The first macro element is "fixed" and has two columns for smaller sortables
2. The second macro element is "mobile," meaning it will also be a sortable
3. The third macro element is "fixed" and has two columns for smaller sortables

The code to make this all work together is remarkably simple:

$('.column').sortable({
    forcePlaceholderSize: true,
    connectWith: '.column',
    handle: '.section-handle',
    cursor: 'move',
    opacity: 0.7
});

$('#wrapper').sortable({
    forcePlaceholderSize: true,
    handle: '.section-handle',
    cursor: 'move',
    opacity: 0.7
});

This connects the various .column elements so that the 1-column elements can be interchanged anywhere on the page. The second code block turns the entire #wrapper element into its own sortable, which allows you to reposition the large, 2-column element on the page as well.

Since I'm explicitly declaring the drag handle (a div with the section-handle class attached to each sortable element), you don't need a cancel property on your sortable() call ... the "fixed" macro elements don't have the drag handle to begin with, so they can't be manually repositioned. However, you can drag the "mobile" macro element (item-2) to anywhere else on the page without any problem.

The only issue I'm still facing (and it's more a personal frustration than anything else) is that the two sortables (#wrapper and .column) aren't aware of one another. So if you have the following layout:

-------------------
| item 1 |        |
|      item 2     |
| item 3 | item 5 |
| item 4 |        |
-------------------

And items 3, 4, and 5 are in the same sortable container, then you can't drag item 2 in between items 3 and 4. When dragging item 2, the page is aware of 3 sortable elements - the block containing item 1, the block you're dragging (item 2), and the block containing items 3, 4, and 5. So while from a usability perspective you should be able to place item 2 below items 3 and 5 ... the method I've outlined above doesn't allow you to do that.

So for now it works, but there's definitely massive room for improvement here.