[Function] sortable(options)
Создать эффект сортируемости элементов.
sortable(options) → jQuery
Плагин jQuery UI Sortable позволяет сортировать выбранные элементы с помощью притаскивания их курсором мыши.
Все функции возвращают два аргумента: исходное событие браузера и обработанный ui объект, ниже указано их описание (если в качестве второго аргумента указано 'ui'):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://test-drupal.ru/themes/slyweb/css/jquery-ui-1.7.2.custom.css"
rel="stylesheet" type="text/css"/>
<script src="http://test-drupal.ru/themes/slyweb/js/jquery-1.3.2.min.js"></script>
<script src="http://test-drupal.ru/themes/slyweb/js/jquery-ui-1.7.2.custom.min.js"></script>
<script>
$(document).ready(function(){
$(function() {
$("#sortable").sortable();
$("#sortable").disableSelection();
});
});
</script>
</head>
<body class="iframe">
<div class="demo">
<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
</div><!-- End demo -->
<div style="display: none;" class="demo-description">
<p>
Enable a group of DOM elements to be sortable. Click on and drag an
element to a new spot within the list, and the other items will adjust to
fit. By default, sortable items share <code>draggable</code> properties.
</p>
</div><!-- End demo-description -->
</body>
</html>
<style>
#sortable
{ list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li
{ margin: 0 3px 3px 3px; padding: 0.4em;
padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span
{ position: absolute; margin-left: -1.3em; }
</style>
ui.helper
ui.position
ui.offset
ui.item
ui.placeholder
ui.sender
Определяет, где подручный элемент, который перемещается мышью,
будет присоединяется в течение перемещения (к примеру, для решения вопросв с overlap/zIndex).
"По умолчанию установлено"parent
Установить или получить опцию appendTo после запуска.
$('.selector').sortable({ appendTo: 'body' });
$('.selector').sortable({ appendTo: 'body' });
//получить опцию
var appendTo = $('.selector').sortable('option', 'appendTo');
//установить опцпию
$('.selector').sortable('option', 'appendTo', 'body');
Если определено, элементы могут перетаскиваться только по горизонтали или по вертикале. Доступные значения:'x', 'y'.
"По умолчанию установлено"false
Сортировать элементы с опцией axis.
$('.selector').sortable({ axis: 'x' });
Установить или получить опцию axis после запуска.
//получить опцию
var axis = $('.selector').sortable('option', 'axis');
//установить опцию
$('.selector').sortable('option', 'axis', 'x');
Предотвращает сортировку элементов, начинающихся определенным селектором.
"По умолчанию установлено":input,button
Сортировать элементы с опцией cancel.
$('.selector').sortable({ cancel: 'button' });
Установить или получить опцию cancel после запуска.
//получить опцию
var cancel = $('.selector').sortable('option', 'cancel');
//установить опцию
$('.selector').sortable('option', 'cancel', 'button');
Устанвить jQuery селектор с элементами, которые также сортируемы. Если опция используется, сортируемые элементы связываются с другими сортируемыми элементами, поэтому вы можете перетаскивать и распределять их среди других элементов.
"По умолчанию установлено"false
Сортировать элементы с опцией connectWith.
$('.selector').sortable({ connectWith: '.otherlist' });
Установить или получить опцию connectWith после запуска.
//получить опцию
var connectWith = $('.selector').sortable('option', 'connectWith');
//установить опцию
$('.selector').sortable('option', 'connectWith', '.otherlist');
Опция ограничивает перемещение элементов границами определенного элемента, которым могут быть DOM element, 'parent', 'document', 'window', или jQuery селектор.
"По умолчанию установлено"false
Сортировать элементы с опцией containment.
$('.selector').sortable({ containment: 'parent' });
Установить или получить опцию containment после запуска.
//получить опцию
var containment = $('.selector').sortable('option', 'containment');
//установить опцию
$('.selector').sortable('option', 'containment', 'parent');
Определяет курсор, который отображается в течение всего перемещения элемента.
"По умолчанию установлено"auto
Сортировать элементы с опцией cursor.
$('.selector').sortable({ cursor: 'crosshair' });
Установить или получить опцию cursor после запуска.
//получить опцию
var cursor = $('.selector').sortable('option', 'cursor');
//установить опцию
$('.selector').sortable('option', 'cursor', 'crosshair');
Перемещает сортируемый элемент или манипулятор так, что курсор всегда появляется при перемещении на одной и той же позиции. Координаты могут быть определены как хэш, используя комбинации одно или двух ключей: { top, left, right, bottom }.
"По умолчанию установлено"false
Сортировать элементы с опцией cursorAt.
$('.selector').sortable({ cursorAt: 'top' });
Установить или получить опцию cursorAt после запуска.
//получить опцию
var cursorAt = $('.selector').sortable('option', 'cursorAt');
//установить опцию
$('.selector').sortable('option', 'cursorAt', 'top');
Время в миллисекундах, определяющее, когда должно начаться перемещение сортируемого объекта. Это помогает предупредить случайное перетаскивание элементов.
"По умолчанию установлено"0
Сортировать элементы с опцией delay.
$('.selector').sortable({ delay: 500 });
Установить или получить опцию delay после запуска.
//получить опцию
var delay = $('.selector').sortable('option', 'delay');
//установить опцию
$('.selector').sortable('option', 'delay', 500);
Ограничение в пикселях, определяющее, когда должно начаться перемещение сортируемого элемента. Если определено, сортирование элементов не начнётся до тех пор, пока курсор мыши не пройдёт определенное расстояние. Может быть использовано, чтобы позволить нажимать на элементах, находящихся внутри других элементов.
"По умолчанию установлено"1
Сортировать элементы с опцией distance.
$('.selector').sortable({ distance: 30 });
Установить или получить опцию distance после запуска.
//получить опцию
var distance = $('.selector').sortable('option', 'distance');
//установить опцию
$('.selector').sortable('option', 'distance', 30);
Опция определят, возможно ли помещение элемента в пустой список, если true то для элемента позволено быть помещенным из сортируемого списка в пустой сортируемый список.
"По умолчанию установлено"true
Сортировать элементы с опцией dropOnEmpty.
$('.selector').sortable({ dropOnEmpty: false });
Установить или получить опцию dropOnEmpty после запуска.
//получить опцию
var dropOnEmpty = $('.selector').sortable('option', 'dropOnEmpty');
//установить опцию
$('.selector').sortable('option', 'dropOnEmpty', false);
Если установлено true,то подручный элемент должен иметь определенный размер.
"По умолчанию установлено"false
Сортировать элементы с опцией forceHelperSize.
$('.selector').sortable({ forceHelperSize: true });
Установить или получить опцию forceHelperSize после запуска.
//получить опцию
var forceHelperSize = $('.selector').sortable('option', 'forceHelperSize');
//установить опцию
$('.selector').sortable('option', 'forceHelperSize', true);
Опция: forcePlaceholderSize
Если true, то опция определяет отображает место, на которое помещается сортируемый элемент.
"По умолчанию установлено"false
Сортировать элементы с опцией forcePlaceholderSize.
$('.selector').sortable({ forcePlaceholderSize: true });
Установить или получить опцию forcePlaceholderSize после запуска.
//получить опцию
var forcePlaceholderSize = $('.selector').sortable('option', 'forcePlaceholderSize');
//установить опцию
$('.selector').sortable('option', 'forcePlaceholderSize', true);
Перемещение сортируемого элемента или манипулятора с помощью щелчков по координатной сетке, каждые x и y пикселей. Значение массива : [x, y]
"По умолчанию установлено"false
Сортировать элементы с опцией grid.
$('.selector').sortable({ grid: [50, 20] });
Установить или получить опцию grid после запуска.
//получить опцию
var grid = $('.selector').sortable('option', 'grid');
//установить опцию
$('.selector').sortable('option', 'grid', [50, 20]);
Ограничить сортирование нажатием по определенному элементу.
"По умолчанию установлено"false
Сортировать элементы с опцией handle.
$('.selector').sortable({ handle: 'h2' });
Установить или получить опцию handle после запуска.
//получить опцию
var handle = $('.selector').sortable('option', 'handle');
//установить опцию
$('.selector').sortable('option', 'handle', 'h2');
Позволяет для подручного элемента быть использованным для перемещения по экрану. Установленная функция возвращает событие и сортируемый элемент, следует вернуть DOMElement для использования в качестве пользовательского подручного элемента. Допустимые значения: 'original', 'clone'
"По умолчанию установлено"original
Сортировать элементы с опцией helper.
$('.selector').sortable({ helper: 'clone' });
Установить или получить опцию helper после запуска.
//получить опцию
var helper = $('.selector').sortable('option', 'helper');
//установить опцию
$('.selector').sortable('option', 'helper', 'clone');
Определить, какие элементы внутри элемента подлежит сортировке.
"По умолчанию установлено"> *
Сортировать элементы с опцией items.
$('.selector').sortable({ items: 'li' });
Установить или получить опцию items после запуска.
//получить опцию
var items = $('.selector').sortable('option', 'items');
//установить опцию
$('.selector').sortable('option', 'items', 'li');
Определить значение свойства opacity, для подручного элемента, существующее до тех пор пока элемент перемещается.
"По умолчанию установлено"false
Сортировать элементы с опцией opacity.
$('.selector').sortable({ opacity: 0.6 });
Установить или получить опцию opacity после запуска.
//получить опцию
var opacity = $('.selector').sortable('option', 'opacity');
//установить опцию
$('.selector').sortable('option', 'opacity', 0.6);
Опция устанавливает класс, который применяется к пространству, в которое происходит перемещение элемента.
"По умолчанию установлено"false
Сортировать элементы с опцией placeholder.
$('.selector').sortable({ placeholder: 'ui-state-highlight' });
Установить или получить опцию placeholder после запуска.
//получить опцию
var placeholder = $('.selector').sortable('option', 'placeholder');
//установить опцию
$('.selector').sortable('option', 'placeholder', 'ui-state-highlight');
Если установлено true, то элемент будет возвращен к его новой позиции в структуре DOM с эффектом плавной анимации.
"По умолчанию установлено"false
Сортировать элементы с опцией revert.
$('.selector').sortable({ revert: true });
Установить или получить опцию revert после запуска.
//получить опцию
var revert = $('.selector').sortable('option', 'revert');
//установить опцию
$('.selector').sortable('option', 'revert', true);
Если установлено true, то страница будет перемещаться, когда сортируемый элемент дойдёт до края.
"По умолчанию установлено"true
Сортировать элементы с опцией scroll.
$('.selector').sortable({ revert: true });
Установить или получить опцию scroll после запуска.
//получить опцию
var scroll = $('.selector').sortable('option', 'scroll');
//установить опцию
$('.selector').sortable('option', 'scroll', false);
Опция определяет как близко должен быть курсор мыши к краю окна, для того чтобы скролинг начал перемещаться.
"По умолчанию установлено"20
Сортировать элементы с опцией scrollSensitivity.
$('.selector').sortable({ scrollSensitivity: 40 });
Установить или получить опцию scrollSensitivity после запуска.
//получить опцию
var scrollSensitivity = $('.selector').sortable('option', 'scrollSensitivity');
//установить опцию
$('.selector').sortable('option', 'scrollSensitivity', 40);
Скорость с которой окно должно прокручиваться единожды, когда курсор мыши достигнет дистанции установленной опцией scrollSensitivity.
"По умолчанию установлено"20
Сортировать элементы с опцией scrollSpeed.
$('.selector').sortable({ scrollSpeed: 40 });
Установить или получить опцию scrollSpeed после запуска.
//получить опцию
var scrollSpeed = $('.selector').sortable('option', 'scrollSpeed');
//установить опцию
$('.selector').sortable('option', 'scrollSpeed', 40);
Опция представляет способ переупорядочить поведение в течение перетаскивания. Допустимые значениия: 'intersect', 'pointer'. В большинстве настройках, 'pointer' более подходящее.
intersect: перетаскиваемый элемент перекрывает элемент, в которой он помещается не менее чем на 50%.
pointer: указатель мыши перекрывает часть элемента.
"По умолчанию установлено"intersect
Сортировать элементы с опцией tolerance.
$('.selector').sortable({ tolerance: 'pointer' });
Установить или получить опцию appendTo после запуска.
//получить опцию
var tolerance = $('.selector').sortable('option', 'tolerance');
//установить опцию
$('.selector').sortable('option', 'tolerance', 'pointer');
Опция определяет свойство Z-index для элемента/подручного элемента, пока существует перетаскивание элемента.
"По умолчанию установлено"1000
Сортировать элементы с опцией zIndex.
$('.selector').sortable({ tolerance: 'pointer' });
Установить или получить опцию appendTo после запуска.
//получить опцию
var zIndex = $('.selector').sortable('option', 'zIndex');
//установить опцию
$('.selector').sortable('option', 'zIndex', 5);
Событие возникает, когда начинается перемещение сортируемого элемента.
Установить функцию для обработки событие start как инициализирующую опции.
$('.selector').sortable({
start: function(event, ui) { ... }
});
Связать событие start через : sortstart.
$('.selector').bind('sortstart', function(event, ui) {
...
});
Данное событие возникает в течение перетаскивания элемента.
Установить функцию обрабатывающую событие sort как инициализирующую опцию.
$('.selector').sortable({
sort: function(event, ui) { ... }
});
Связать событие sort через : sort.
$('.selector').bind('sort', function(event, ui) {
...
});
Данное событие возникает в течение сортировки элементов, но только, когда DOM позиция изменилась.
Установить функцию обрабатывающую событие change как инициализирующую опцию.
$('.selector').sortable({
change: function(event, ui) { ... }
});
Связать событие change через : sortchange.
$('.selector').bind('sortchange', function(event, ui) {
...
});
Данное событие возникает, когда прекращается сортировка, но когда место, в которое помещается элемент/подручный элемент до сих пор доступно.
Установить функцию обрабатывающую событие beforeStop как инициализирующую опцию.
$('.selector').sortable({
beforeStop: function(event, ui) { ... }
});
Связать событие beforeStop через : sortbeforeStop.
$('.selector').bind('sortbeforeStop', function(event, ui) {
...
});
Данное событие возникает, когда сортировка прекратилась.
Установить функцию обрабатывающую событие stop как инициализирующую опцию.
$('.selector').sortable({
stop: function(event, ui) { ... }
});
Связать событие stop через : sortstop.
$('.selector').bind('sortstop', function(event, ui) {
...
});
Данное событие запускается, когда пользователь прекратил сортировать элементы и DOM позиция изменилась.
Установить функцию обрабатывающую событие update как инициализирующую опцию.
$('.selector').sortable({
update: function(event, ui) { ... }
});
Связать событие update через: sortupdate.
$('.selector').bind('sortupdate', function(event, ui) {
...
});
Данное событие запускается, когда подключенный сортируемый список получил элемент другого списка.
Задать функцию, чтобы обработать событие receive как инициализирующую опцию.
$('.selector').sortable({
receive: function(event, ui) { ... }
});
Связать событие receive через: sortreceive.
$('.selector').bind('sortreceive', function(event, ui) {
...
});
Данное событие запускается, когда сортируемый элемент был вытащен из списка и помещён другой список.
Задать функцию, чтобы обработать событие remove как инициализирующую опцию.
$('.selector').sortable({
remove: function(event, ui) { ... }
});
Связать событие remove через: sortremove.
$('.selector').bind('sortremove', function(event, ui) {
...
});
Данное событие запускается, когда сортируемый элемент передвигается в подключенный список.
Задать функцию, чтобы обработать событие over как инициализирующую опцию.
$('.selector').sortable({
over: function(event, ui) { ... }
});
Связать событие over через: sortover.
$('.selector').bind('sortover', function(event, ui) {
...
});
Данное событие запускается, когда сортируемый элемент удаляется от подключенного списка.
Задать функцию, чтобы обработать событие sortout как инициализирующую опцию.
$('.selector').sortable({
out: function(event, ui) { ... }
});
Связать событие out через: sortout.
$('.selector').bind('sortout', function(event, ui) {
...
});
Данное событие запускается, когда используется подключенный лист и как только начинается перемещение элемента.
Задать функцию, чтобы обработать событие activate как инициализирующую опцию.
$('.selector').sortable({
activate: function(event, ui) { ... }
});
Связать событие activate через: sortactivate.
$('.selector').bind('sortactivate', function(event, ui) {
...
});
Данное событие запускается, когда сортировка была прекращена, распространяется на каждый подключенный список.
Задать функцию, чтобы обработать событие deactivate как инициализирующую опцию.
$('.selector').sortable({
deactivate: function(event, ui) { ... }
});
Связать событие deactivate через: sortdeactivate.
$('.selector').bind('sortdeactivate', function(event, ui) {
...
});
.sortable( 'destroy' )
Полностью удаляет функциональность, созданную данной функцией. Это вернёт элемент братно к его первоначальному состоянию.
.sortable('disable')
Отключить сортировку.
.selectable( 'enable' )
Включить сортировку.
.selectable( 'option' , optionName , [value] )
Установить или получить любую опцию сортировки. Если не указано значение,то будет получена опция.
.sortable('serialize',[options])
Данная опция объединяет значение идентификаторов сортируемых элементов в form/ajax строку. Вызывая данный метод вы получаете хэш, который может быть присоединён к любому url для передачи обратно к серверу.
Метод работает по умолчанию через проверку id каждого элемента в формате 'setname_number', и выбирает их в хэш как "setname[]=number&setname[]=number".
Вы можете установить опции хэша как второй аргумент, чтобы самостоятельно определить как работает функция. Доступные опции: 'key' (замените part1[] тем, чем вы хотите), 'attribute' (возможен другой атрибут чем 'id') и 'expression' (используйте ваше собственное regexp).
Если метод возвращет пустую строку, проверьте, чтобы id атрибуты вулючают символ подчёркивания. Они должны быть следующей формы: "set_number". К примеру, 3 элемента списка с id атрибутами foo_1, foo_5, foo_2 будут объекдинены в foo[]=1&foo[]=5&foo[]=2. Вы можете использовать символ подчёркивания, похожие знаки или дефис для разделения значения и номера. К примеру foo=1 или foo-1 или foo_1 будут объединены в foo[]=1.
.sortable('toArray')
Объединяет идентификаторы сортируемых элементов в связанный массив. Если вы имеет
<ul id="a_sortable"><br>
<li id="hello">Hello</li><br>
<li id="goodbye">Good bye</li><br>
</ul>
и укажете
var result = $('#a_sortable').sortable('toArray');
то получите
result[0] будет содержать "hello", result[1] будет содержать "goodbye".
.sortable('refresh')
Обновление сортируемых объектов. Специальный запуск перезагрузки всех сортируемых элементов, создающий новый список элементов.
.sortable('refreshPositions')
Refresh the cached positions of the sortables' items. Calling this method refreshes the cached item positions of all sortables. This is usually done automatically by the script and slows down performance. Use wisely.
.sortable('cancel')
Сигнатура: .sortable( 'cancel' )
Отменить изменения в текущей сортировке и вернуть сортируемые элементы обратно к тому состоянию, которое было до начала текущей(последней) сортировки. Полезно в остановке и получении функцией обратного вызова.
Если сортируемые элементы ещё не передвинуты из одного подключенного списка в другой:
$(this).sortable('cancel');
отменит изменения.
Если сортируемые элементы уже перемещены из одного подключённого списка в другой:
$(ui.sender).sortable('cancel');
Отменит изменения. Полезно для 'получения' callback.
Используемая тема jQuery UI
Плагин jQuery UI Sortable использует jQuery UI CSS структуру для придания стиля, включающую цвета и фоновые текстуры. Мы рекомендуем использовать инструмент ThemeRoller для создания и загрузки тем, которые легко встраиваются и поддерживаются.
Если нуждается более глубокий уровень настройки, существует особый виджет классов ссылающийся на ui.draggable.css лист стилей, который может быть модифицирован. Данный класс подчеркнут жирным ниже.
Образец разметки jQuery UI CSS струтктуры классов
<ul class="ui-sortable">
<li></li>
<li></li>
<li></li>
</ul>
Примечание: Данный образец разметки создан посредством плагина sortable, это не разметка для того чтобы сортировать элементы. Для этого достаточно следующей разметки
<ul>
<li></li>
<li></li>
<li></li>
</ul>
Версия jQuery 1.3.2
Документ создан 2009-02-21T00:32:39Z