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

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

2 голосов
/ 24 июня 2009

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

<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 для сортировки / упорядочивания элементов обертки в коде или мне нужно было бы развернуть свое собственное решение. Плагин мог бы работать, если бы я хотел отсортировать элементы в левой или правой колонке, но не между собой. Любая помощь будет принята с благодарностью.

Ответы [ 5 ]

3 голосов
/ 24 июня 2009

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

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

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

3 голосов
/ 24 июня 2009

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

http://www.tablesorter.com/

1 голос
/ 24 июня 2009

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

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

0 голосов
/ 02 июня 2012

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

0 голосов
/ 24 июня 2009

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

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

...