Working with multiple columns of sortable items in jQuery

Question

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

However, I have two items in the list that should span both columns. This, unfortunately, violates the usability of the model. If I adhere to the standard two-column standard setting, I encounter situations where wide elements overlap or overlap with elements in another column.

I also tried iterating over both columns to move the elements so that there was no overlap, but then I realized another problem: my second column (on the right) does not know the elements located in the first column (on the left).

Here is 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>

How this should line up looks like this table:

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

And each element can be dragged and dropped anywhere, with elements 1, 3, 4, 5 moving between two columns, and using item 2, moving up and down as necessary. Actually, you should also keep in mind something like this:

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

But with a standard column model (i.e. jQuery examples for stock, the only resources I can find from a few days of Google search, and with every attempt I have made so far), this will not work.

, jQuery UI Sortable plug-in, ?

Answer 1

. , .

. :

<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>

- 1 , 1 . , 3 :

• ""
• "",
• ""

, , :

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

.column, 1 . #wrapper , , 2- .

(div section-handle, ), cancel sortable()... "" , . "" (item-2) - .

, ( , - ) , (#wrapper .column) . , :

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

3, 4 5 , 2 3 4. 2 - , 1, , ( 2), , 3, 4 5. , 2 3 5... , .

, , .