Пример использования

Пример

$(document).ready(function() {

   $("#tabs").tabs();
//Код первой вкладки (стандартное использование)
   $("#sort1").sortable();
//Код второй вкладки (связанные списки)
   $("#sort2").sortable({connectWith:"#sort3"});
   $("#sort3").sortable({connectWith:"#sort2"});
//Код третьей вкладки (отключение сортируемости)
   $("#sort4").sortable({items:".sort"});
//Код четвертой вкладки (оформление заполнителя)
   $("#sort5").sortable({placeholder:"placeh ui-state-highlight"});

});

Попробовать в редакторе

Определение и использование

С помощью метода sortable Вы можете сделать группу элементов сортируемыми.

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

Сортируемым элементам автоматически назначается класс .ui-sortable.

С помощью опций и событий перечисленных в таблицах далее на данной странице Вы можете настраивать поведение сортируемых элементов под конкретные нужды.

Синтаксис

$(селектор).sortable(опции_или_события)

селектор выбирает группу элементов, которые будут сделаны сортируемыми.

опции настраивают дополнительные аспекты поведения сортируемых элементов. Все опции доступные в jQuery UI для сортируемых элементов рассмотрены в таблице далее.

события события связанные с сортируемыми элементами. Все события связанные с сортируемыми элементами рассмотрены в таблице далее.

Опции

Опции	Описание
appendTo	Указывает элемент, к которому будет привязываться элемент помощник (элемент, который отображается во время перетаскивания). Значение по умолчанию: 'parent'. Пример использования: .sortable({appendTo:'body'})
axis	Позволяет задать ось, по которой можно перетаскивать элемент. Возможные значения: 'x' (элемент можно будет перетаскивать только по горизонтали) и 'y' (элемент можно будет перетаскивать только по вертикали). Значение по умолчанию: false. Пример использования: .sortable({axis:'y'})
cancel	Указывает элемент потомок сортируемого элемента, нажав на который нельзя перетащить сортируемый элемент. Значение по умолчанию: :input,option. Пример использования: .sortable({cancel:'.nodrag'})
connectWith	Позволяет связать группы сортируемых элементов. Элементы из одной связанной группы могут быть перенесены в другую и наоборот. Значение по умолчанию: false. Пример использования: .sortable({connectWith:'#connectlist'})
containment	Ограничивает перетаскивание элемента границами указанного элемента. Возможные строковые значения: 'parent', 'window', 'document'. Значение по умолчанию: false. Пример использования: .sortable({containment:'#wrap1'})
cursor	Позволяет задать вид курсора мыши во время перетаскивания. Значение по умолчанию: auto. Пример использования: .sortable({cursor:'move'})
cursorAt	Задает смещение положения элемента помощника (элемент, который отображается во время перетаскивания объекта) относительно курсора мыши в пикселях. Задается с помощью следующих свойств: left, right, top, bottom (смещение влево, вправо, вверх и вниз). Значение по умолчанию: false. Пример использования: .sortable({cursorAt:{left:5}})
delay	Устанавливает задержку в миллисекундах перед тем, как элемент начнет перетаскиваться (может использоваться для предотвращения перетаскивания при случайном щелчке на элементе). Значение по умолчанию: 0. Пример использования: .sortable({delay:400})
distance	Устанавливает количество пикселей, на которые должен быть перетащен элемент, прежде чем он начнет изменять свое местоположения (может использоваться для предотвращения перетаскивания при случайном щелчке на элементе). Значение по умолчанию: 1. Пример использования: .sortable({distance:50})
dropOnEmpty	Если имеет значение true элементы из связанной группы не могут быть перемещены в данную если она пуста. Значение по умолчанию: false. Пример использования: .sortable({dropOnEmpty:true})
grid	Устанавливает величину сетки, по которой будет перемещаться элемент помощник во время перетаскивания. С помощью координат x и y Вы можете установить размеры сетки. Значение по умолчанию: false. Пример использования: .sortable({grid:[40,40]})
handle	Указывает элемент, при щелчке на который начнется перетаскивание. Значение по умолчанию: false. Пример использования: .sortable({handle:'p'})
helper	Устанавливает вид элемента помощника (элемент, который отображается во время перетаскивания). Возможные значения: 'original' (сам элемент будет отображаться в качестве помощника), 'clone' ( будет отображена копия перетаскиваемого элемента), функция (функция должна возвращать DOM элемент, который будет отображаться в качестве помощника). Значение по умолчанию: 'original'. Пример использования: .sortable({helper:'clone'})
items	Указывает какие элементы в группе могут быть отсортированы. Значение по умолчанию: > * (все элементы в выбранной группе). Пример использования: .sortable({items:'.maysort'})
opacity	Устанавливает прозрачность элемента помощника (элемент, который отображается во время перетаскивания). Значение по умолчанию: false. Пример использования: .sortable({opacity:0.55})
placeholder	Указывает класс, с помощью которого Вы можете оформить заполнитель (место куда будет помещен сортируемый элемент). Значение по умолчанию: false. Пример использования: .sortable({placeholder:'#placeh'})
revert	Если имеет значение true перетаскиваемый элемент будет анимированно возвращаться (перемещаться) на свою начальную (новую) позицию при завершении перетаскивания. Значение по умолчанию: false. Пример использования: .sortable({revert:'true'})

События

Все обработчики событий принимают два аргумента - стандартный объект event браузера и специальный объект ui.

Объект ui имеет следующие свойства:

ui.helper - объект представляющий элемент помощник, который был перетащен.
ui.position - смещении текущей позиции помощника относительно прежней позиции в пикселях (ui.position.left - содержит смещение по горизонтали, ui.position.top - содержит смещение вертикали).
ui.offset - смещение текущей позиции помощника относительно границ страницы в пикселях (ui.offset.left - смещение по горизонтали, ui.offset.top - смещение по вертикали).
ui.item - текущий перетаскиваемый элемент.
ui.sender - группа сортируемых элементов, из которой был перемещен данный элемент (будет содержать значение только если Вы переместили элемент из одной группы в другую).

Синтаксис

$(селектор).sortable({событие:function(event,ui){Код обработчика}})
//или
$(селектор).bind("sortсобытие",function(event,ui){Код обработчика})

Обратите внимание: например для того, чтобы привязать к группе сортируемых элементов с id='test' обработчик события create, который выводит сообщение "привет" необходимо будет написать следующий код: $("#test").sortable({create:function(event,ui){alert("Привет")}}).

События	Описание
create	Определяет функцию, код которой будет выполнен, когда группа сортируемых элементов будет создана.
start	Определяет функцию, код которой будет выполнен, когда начнется сортировка.
sort	Определяет функцию, код которой будет выполнен во время сортировки.
change	Определяет функцию, код которой будет выполнен во время сортировки, но только если положение элементов в группе изменится.
stop	Определяет функцию, код которой будет выполнен, когда сортировка завершиться.
update	Определяет функцию, код которой будет выполнен, когда сортировка завершиться при условии, что положение элементов в группе изменится.
receive	Определяет функцию, код которой будет выполнен, когда один из связанный списков сортируемых элементов получит элемент из другого.

« Методы взаимодействия jQuery UI