Как создать свой сайт → Уроки jQuery → Урок 13. Плагин Sortable - сортируем элементы

jQuery - Урок 13. Плагин Sortable - сортируем элементы

Плагин Sortable позволяет сортировать элементы, перемещая их мышкой. Предположим, у нас есть какой-либо тест, где нужно расставить книги в соответствии с их авторами:
Расположите название книги напротив ее автора, начиная с первого, осталальные названия будут сдвигаться вниз.
  • Булгаков М.А.
  • Горький А.М.
  • Грибоедов А.С.
  • Достоевский Ф.М.
  • Пушкин А.С.
  • Толстой Л.Н.
  • Чехов А.П.
  • "Война и мир"
  • "Капитанская дочка"
  • "Горе от ума"
  • "Вишневый сад"
  • "Преступление и наказание"
  • "Старуха Изергиль"
  • "Белая гвардия"
Сделать это крайне просто. Html-код нашей страницы:
<html> <head> <title>jQuery плагин resizable</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="les13_ex1"> <ul id="books"> <li class="les13">Булгаков М.А.</li> <li class="les13">Горький А.М.</li> <li class="les13">Грибоедов А.С.</li> <li class="les13">Достоевский Ф.М.</li> <li class="les13">Пушкин А.С.</li> <li class="les13">Толстой Л.Н.</li> <li class="les13">Чехов А.П.</li> </ul> </div> <div id="les13_ex2"> <ul id="authors"> <li class="les13">"Война и мир"</li> <li class="les13">"Капитанская дочка"</li> <li class="les13">"Горе от ума"</li> <li class="les13">"Вишневый сад"</li> <li class="les13">"Преступление и наказание"</li> <li class="les13">"Старуха Изергиль"</li> <li class="les13">"Белая гвардия"</li> </ul> </div> </body> </html>
Немного украсим на странице style.css:
li.les13{ background:yellow; border:1px solid blue; color:blue; margin:1px; padding:2px; } #les13_ex1, #les13_ex2{ width:300px; float:left; }
А на странице script.js укажем, что второй список можно сортировать:
$(document).ready(init); function init(){ $(function(){ $("#authors").sortable(); }); }
Готово! Как и у остальных плагинов UI, у плагина sortable есть ряд параметров. Давайте их рассмотрим:
  • appendTo - передает селектор или элемент, используемый в качестве контейнера для сортируемого элемента во время его перемещения (по умолчанию значение "parent").

    Пример:
    $(function(){ $("#les13_ex3").sortable({ appendTo: '#resalt' }); });
    • Пункт 1
    • Пункт 2
    • Пункт 3
    • Пункт 4


  • axis - определяет как можно перемещать сортируемый элемент. Возможные значения: x - по горизонтали и y - по вертикали.

    Пример:
    $(function(){ $("#les13_ex4").sortable({ axis: 'y' }); });
    • Пункт 1
    • Пункт 2
    • Пункт 3
    • Пункт 4


  • cancel - запрещает сортировку элементов с определенным селектором.

    Пример:
    $(function(){ $("#les13_ex5").sortable({ cancel: '.les13' }); });
    • Пункт 1
    • Пункт 2
    • Пункт 3
    • Пункт 4
    Теперь наши пункты списка сортировать нельзя.


  • connectWith - здесь можно указать другой сортируемый список, в который можно перемещать сортируемые элементы, после чего они станут частью этого списка.

    Пример:
    $(function(){ $("#les13_ex6").sortable(); }); $(function(){ $("#les13_ex7").sortable({ connectWith: '#les13_ex6' }); });
    Список 1
    • Пункт 1
    • Пункт 2
    • Пункт 3
    • Пункт 4
    Список 2
    • Пункт 1
    • Пункт 2
    • Пункт 3
    • Пункт 4
    Теперь пункты списка 2 можно помещать в пункты списка 1, но НЕ наоборот.


  • containment - ограничивает перемещение элементов границами другого элемента.

    Пример:
    $(function(){ $("#les13_ex8").sortable({ containment: 'parent' }); });
    • Пункт 1
    • Пункт 2
    • Пункт 3
    • Пункт 4
    Теперь даже при перемещении пункты всегда остаются в пределах синей рамки.


  • cursor - определяет вид курсора во время перемещения.

    Пример:
    $(function(){ $("#les13_ex9").sortable({ cursor: 'e-resize' }); });
    • Пункт 1
    • Пункт 2
    • Пункт 3
    • Пункт 4
    Возможные значения вида курсора были описаны в уроке 10.


  • delay - определяет отсрочку начала перемещения элемента.

    Пример:
    $(function(){ $("#les13_ex10").sortable({ delay: 1000 }); });
    • Пункт 1
    • Пункт 2
    • Пункт 3
    • Пункт 4
    Теперь перемещение начинается только через 1 секунду.


  • distance - определяет расстояние в пикселах, которое пройдет курсор мыши прежде, чем начнется перемещение.

    Пример:
    $(function(){ $("#les13_ex11").sortable({ distance: 20 }); });
    • Пункт 1
    • Пункт 2
    • Пункт 3
    • Пункт 4


  • dropOnEmpty - определяет можно ли перемещать сортируемые элементы одного списка в связанный, но пустой список. По умолчанию "true".

    Пример:
    $(function(){ $("#les13_ex12").sortable(); }); $(function(){ $("#les13_ex13").sortable({ connectWith: '#les13_ex12', dropOnEmpty: false }); });
    Список 1
    Список 2
    • Пункт 1
    • Пункт 2
    • Пункт 3
    • Пункт 4






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