jQuery Сортируемый для переупорядочения двух столбцов?

Question

Привет всем. Вот сценарий. У меня есть код ниже, и мне нужно переставить элементы в этих столбцах. Проблема в том, что ... элементы не обязательно должны оставаться в пределах своего содержащего столбца, они должны иметь возможность переключаться вперед и назад, в зависимости от пользователя. Вот пример кода:

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

И связанный 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; }

Мне было интересно, можно ли использовать сортируемый плагин jQuery для сортировки / упорядочивания элементов-оболочек в коде или мне нужно было бы развернуть собственное решение. Плагин мог бы работать, если бы я хотел отсортировать элементы внутри левого или правого столбца, но не между ними. Любая помощь будет принята с благодарностью.

Answer 1

Оказывается, есть более простое решение. С помощью Роберта и предоставленных им ссылок это решение отлично работает:

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

Как указывалось ранее, с помощью сортируемого элемента я мог отсортировать каждый элемент в его соответствующем столбце, но его нельзя было "отбросить". над противоположной колонной. Атрибут connectWith подключаемого модуля сортировки позволяет указать другой сортируемый объект, с которым вы хотите иметь возможность сортировать. Спасибо за помощь.

Answer 2

Плагин TableSorter должен делать то, что вам нужно. Он работает только с таблицами, но он очень гибкий; он даже имеет специальную обработку для чисел. В настоящее время я использую его в проекте, над которым я работаю.

http://www.tablesorter.com/

Answer 3

Сортируемый пользовательский интерфейс jQuery должен позволять перемещать элементы вверх и вниз в столбце:

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

Это немного сбивает с толку, поскольку на сайте jQuery также есть сортируемая страница с демонстрацией что в настоящее время не работает.

Вам также может понадобиться jQuery UI Droppable:

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

Droppable позволит вам перетаскивать из одного столбца в другой. Вот ссылка на Droppable на сайте jQuery (эта демонстрация работает):

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

Answer 4

Если вы собираетесь использовать решение для перетаскивания, threedubmedia будет намного быстрее, меньше раздутая версия, чем библиотека JQuery UI.

Моя демонстрация здесь . Вы можете перемещать имена между списками, но они не сортируются в списке. Это должно быть легко изменить, хотя.

Answer 5

Вы можете получить пример здесь: он прекрасно имитирует интерфейс iGoogle, а также сортирует и отбрасывает куда угодно: iGoogle