Работа с сортируемыми в несколько столбцов элементами в jQuery

Question

Вот моя дилемма - у меня есть список элементов из двух столбцов (в стиле <div> s), которые мне нужно сделать сортируемыми.С элементами, которые живут в одном или другом столбце, это легко - я просто устанавливаю два столбца, помещаю свои элементы туда, где они должны быть изначально, помечаю их как «сортируемые» и позволяю jQuery творить чудеса.

Тем не менее, у меня есть два элемента в списке, которые должны охватывать оба столбца.Это, к сожалению, нарушает удобство использования модели.Если я придерживаюсь своей стандартной установки с двумя столбцами, я сталкиваюсь с ситуациями, когда широкие элементы перекрываются или перекрываются с элементами в другом столбце.

Я также пытался перебрать оба столбца, чтобы изменить положение элементов, чтобы не былоперекрытия, но затем я понял еще одну проблему: мой второй столбец (справа) не знает элементов, расположенных в первом столбце (слева).

Вот урезанный пример моей разметки:

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

То, как этот должен выстроиться в линию, выглядит примерно так:

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

И каждый элемент можно перетаскивать куда-либо еще, с элементами 1,3, 4, 5 перемещаются взаимозаменяемо между двумя колоннами, а элемент 2 перемещается вверх и вниз при необходимости.На самом деле, вы также должны иметь возможность получить что-то вроде этого:

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

Но со стандартной моделью столбца (то есть с примерами стандартных jQuery, единственными ресурсами, которые я могу найти за несколько дней поиска в Google,и все попытки, которые я предпринял до сих пор), это не сработает.

Итак, что я могу сделать, чтобы реализовать макет такого типа с помощью плагина jQuery UI Sortable, чтобы я мог продолжить создание своего интерфейса?

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>

Затем вы создаете 2 разных сортируемых элемента - один для сортировки меньших элементов с 1 столбцом между собой, а другой - для сортировки "макро" элементов с 1 столбцом.Обратите внимание, что на этой странице есть 3 макроэлемента:

1. Первый макроэлемент является «фиксированным» и имеет два столбца для сортировки меньшего размера
2. Второй макроэлемент «мобильный»это означает, что он также будет сортируемым
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 в его собственный сортируемый элемент, что позволяет вам также перемещать большой элемент с двумя столбцами на странице.

Поскольку я явно объявляю дескриптор перетаскивания (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, страница знает о 3 сортируемых элементах - блок, содержащий элемент 1, блок, который вы перетаскиваете (элемент 2), и блок, содержащий элементы 3, 4 и 5. Таким образом, с точки зрения удобства использования вы Если сможет поместить элемент 2 ниже пунктов 3 и 5 ... метод, который я описал выше, не позволяет вам сделать это.

Итак, пока он работает, но определенно массивныйПространство для улучшения здесь.