Панель Управления


Видеокурс: "Javascript+jQuery для начинающих в видеоформате" Проверка времени и определение часового пояса рабочей станции. RU-CENTER. Центр регистрации доменов зоны .RU Сейчас выгодная возможность зарегистрировать домен .РФ в RU-CENTER Информационная безопасность Система интернет-расчетов RUpay Графический редактор ГИМП (GIMP) Зинаида Лукьянова. Видеокурс Фотошоп с нуля. Евгений Попов. Видеокурс HTML + PHP + MySQL. Весь Софт Софтодром "Электрошоп". Поиск электронных товаров. Джава. Ява. Java. Дмитрий Котеров, Алексей Костарев. PHP-5. Наиболее полное руководство. 2-е издание.



Элемент Сортировщик (Sortable) плагина UI библиотеки jQuery.
Плагин UI версии 1.9.2 библиотеки jQuery версии 1.8.3 Сделано в kocby.ru Плагин jQuery UI Сортируемый (Sortable) позволяет перестроить элементы в списке или форме используя мышь. Плагин jQuery UI Сортируемый (Sortable) делает выбранные элементы Сортируемыми с помощью переноса мышкой. Обратите внимание. Чтобы сортировать табличные ряды, Сортируемым следует сделать tbody, а не саму таблицу.
© Перепечатка разрешается с установкой ссылки на ресурс http://kocby.ru
Sortable :: Сортировщик
Описание: Позволяет перестроить элементы в списке или форме используя мышь.
Description: Reorder elements in a list or grid using the mouse.

Пример странички Сортировщик Дефолтный (по умолчанию, Default functionality):
можно посмотреть здесь.

Пример странички Сортировщик Оставляющий След (Drop placeholder):
можно посмотреть здесь.

Пример странички Сортировщик Соединительный (Connect lists):
можно посмотреть здесь.

Пример странички Сортировщик Соединительный Табулированный (Connect lists through tabs):
можно посмотреть здесь.

Пример странички Сортировщик, работа с пустыми списками (Handle empty lists):
можно посмотреть здесь.

Пример странички Сортировщик с включенными/выключенными пунктами (Include / exclude items):
можно посмотреть здесь.

Пример странички Сортировщик с задержкой по времени и расстоянию (Delay start):
можно посмотреть здесь.

Пример странички Сортировщик шкала с разметкой (Display as grid):
можно посмотреть здесь.

Пример странички Сортировщик портлетов (стилизованные дивы) (Portlets):
можно посмотреть здесь.




Теория

Тесты по теории можно посмотреть здесь.




Options (Опции)



appendTo
Type: jQuery or Element or Selector or String
Default: "parent"

Defines where the helper that moves with the mouse is being appended to during the drag (for example, to resolve overlap/zIndex issues).
Определяет, где помошник, который двигается с мышкой будет присоеденен во время перетаскивания (например, чтобы разрешить противоречия overlap/zIndex.

Multiple types supported:
Поддерживаются множественные типы:
• jQuery (Объект jQuery): A jQuery object containing the element to append the helper to. Объект jQuery, содержащий элемент, к которому присоеденить помошник.
• Element (Элемент): The element to append the helper to. Элемент, к которому присоеденить помошник.
• Selector (Селектор): A selector specifying which element to append the helper to. Селектор, определяющий, к какому элементу следует присоеденить помошник.
• String (Строка): The string "parent" will cause the helper to be a sibling of the sortable item. Строка "parent" (родитель) заставит помошника быть братом сортируемого пункта.

Code examples: (Примеры кода: )
Initialize the sortable with the appendTo option specified:
Инициализация Сортируемого с определенной опцией appendTo:

$( ".selector" ).sortable({ appendTo: document.body });


Get or set the appendTo option, after initialization:
Можно получить или установить опцию appendTo после инициализации:

// getter
var appendTo = $( ".selector" ).sortable( "option", "appendTo" );
 
// setter
$( ".selector" ).sortable( "option", "appendTo", document.body );



axis
Type: String
Default: false

If defined, the items can be dragged only horizontally or vertically. Possible values: "x", "y".
Если определена, пункты можно перетаскивать только горизонтально или вертикально. Возможные значения: "x", "y".

Code examples: (Примеры кода: )
Initialize the sortable with the axis option specified:
Инициализация Сортируемого с определенной опцией axis:

$( ".selector" ).sortable({ axis: "x" });


Get or set the axis option, after initialization:
Можно получить или установить опцию axis после инициализации:

// getter
var axis = $( ".selector" ).sortable( "option", "axis" );
 
// setter
$( ".selector" ).sortable( "option", "axis", "x" );



cancel
Type: Selector
Default: ":input,button"

Prevents sorting if you start on elements matching the selector.
Предотвращает Сортировку, если вы стартуете на элементах, соответствующих селектору.

Code examples: (Примеры кода: )
Initialize the sortable with the cancel option specified:
Инициализация Сортируемого с определенной опцией cancel:

$( ".selector" ).sortable({ cancel: "a,button" });


Get or set the cancel option, after initialization:
Можно получить или установить опцию cancel после инициализации:

// getter
var cancel = $( ".selector" ).sortable( "option", "cancel" );
 
// setter
$( ".selector" ).sortable( "option", "cancel", "a,button" );



connectWith
Type: Selector
Default: false

A selector of other sortable elements that the items from this list should be connected to. This is a one-way relationship, if you want the items to be connected in both directions, the connectWith option must be set on both sortable elements.
Селектор других сортируемых элементов, к которым пункты данного списка должны быть присоединены. Это односторонняя связка. Если вы хотите, чтобы пункты связывались в обоих направлениях, опция connectWith должны быть установлена на обоих сортируемых элементах.

Code examples: (Примеры кода: )
Initialize the sortable with the connectWith option specified:
Инициализация Сортируемого с определенной опцией cancel:

$( ".selector" ).sortable({ connectWith: "#shopping-cart" });


Get or set the connectWith option, after initialization:
Можно получить или установить опцию cancel после инициализации:

// getter
var connectWith = $( ".selector" ).sortable( "option", "connectWith" );
 
// setter
$( ".selector" ).sortable( "option", "connectWith", "#shopping-cart" );



containment
Type: Element or Selector or String
Default: false

Defines a bounding box that the sortable items are contrained to while dragging.
Note: The element specified for containment must have a calculated width and height (though it need not be explicit). For example, if you have float: left sortable children and specify containment: "parent" be sure to have float: left on the sortable/parent container as well or it will have height: 0, causing undefined behavior.
Определяет область ограничения, в которую сортируемые пункты будут заключены во время перетаскивания.
Обратите внимание. Элемент, который определен для ограничения, должен иметь рассчитанную ширину и высоту (хотя точный расчет не требуется). Например, если вы устанавливаете свойство float: left для сортируемых детей и определяете границу: "parent" (родитель) тоже должен иметь свойство float: left на сортируемом родительском контейнере. В противном случае он будет иметь height: 0 (нулевую высоту), что вызовет непредсказуемое поведение.

Multiple types supported:
Поддерживаются множественные типы:
• Element (Элемент): An element to use as the container. Элемент, который используется как контейнер.
• Selector (Селектор): A selector specifying an element to use as the container. Селектор, определяющий элемент, который используется как контейнер.
• String (Строка): A string identifying an element to use as the container. Possible values: "parent", "document", "window". Строка, определяющая элемент, который используется как контейнер. Возможные значения: "parent" (родитель), "document" (документ), "window" (окно).

Code examples: (Примеры кода: )
Initialize the sortable with the containment option specified:
Инициализация Сортируемого с определенной опцией containment:

$( ".selector" ).sortable({ containment: "parent" });


Get or set the containment option, after initialization:
Можно получить или установить опцию containment после инициализации:

// getter
var containment = $( ".selector" ).sortable( "option", "containment" );
 
// setter
$( ".selector" ).sortable( "option", "containment", "parent" );



cursor
Type: String
Default: "auto"

Defines the cursor that is being shown while sorting.
Определяет курсор, который будет показан во время сортировки.

Code examples: (Примеры кода: )
Initialize the sortable with the cursor option specified:
Инициализация Сортируемого с определенной опцией cursor:

$( ".selector" ).sortable({ cursor: "move" });


Get or set the cursor option, after initialization:
Можно получить или установить опцию cursor после инициализации:

// getter
var cursor = $( ".selector" ).sortable( "option", "cursor" );
 
// setter
$( ".selector" ).sortable( "option", "cursor", "move" );



cursorAt
Type: Object
Default: false

Moves the sorting element or helper so the cursor always appears to drag from the same position. Coordinates can be given as a hash using a combination of one or two keys: { top, left, right, bottom }.
Двигает сортируемый элемент или помошника так, чтобы курсор всегда появлялся для перетаскивания из одной позиции. Координаты могут задаваться как хэш с использованием одного или двух ключей: { top (верх), left (лево), right (право), bottom (низ) }.

Code examples: (Примеры кода: )
Initialize the sortable with the cursorAt option specified:
Инициализация Сортируемого с определенной опцией cursorAt:

$( ".selector" ).sortable({ cursorAt: { left: 5 } });


Get or set the cursorAt option, after initialization:
Можно получить или установить опцию cursorAt после инициализации:

// getter
var cursorAt = $( ".selector" ).sortable( "option", "cursorAt" );
 
// setter
$( ".selector" ).sortable( "option", "cursorAt", { left: 5 } );



delay
Type: Integer
Default: 0

Time in milliseconds to define when the sorting should start. Adding a delay helps preventing unwanted drags when clicking on an element.
Время в миллесекундух определяет задержку перед стартом Сортировки. Добавление задержки позволяет предотвратить нежелательное перетаскивание при случайных кликах по элементу.

Code examples: (Примеры кода: )
Initialize the sortable with the delay option specified:
Инициализация Сортируемого с определенной опцией delay:

$( ".selector" ).sortable({ delay: 150 });


Get or set the delay option, after initialization:
Можно получить или установить опцию delay после инициализации:

// getter
var delay = $( ".selector" ).sortable( "option", "delay" );
 
// setter
$( ".selector" ).sortable( "option", "delay", 150 );



disabled
Type: Boolean
Default: false

Disables the sortable if set to true.
Выключает Сортируемый, если опция установлена на значение true (истина).

Code examples: (Примеры кода: )
Initialize the sortable with the disabled option specified:
Инициализация Сортируемого с определенной опцией disabled:

$( ".selector" ).sortable({ disabled: true });


Get or set the disabled option, after initialization:
Можно получить или установить опцию disabled после инициализации:

// getter
var disabled = $( ".selector" ).sortable( "option", "disabled" );
 
// setter
$( ".selector" ).sortable( "option", "disabled", true );



distance
Type: Number
Default: 1

Tolerance, in pixels, for when sorting should start. If specified, sorting will not start until after mouse is dragged beyond distance. Can be used to allow for clicks on elements within a handle.
Холостой ход в пикселях перед тем как Сортировка должна стартовать. Если определена, Сортировка не будет стартовать пока мышь не пройдет требуемое расстояние холостого хода. Может быть использована, чтобы позволить кликать на элементах внутри ручки переноса.

Code examples: (Примеры кода: )
Initialize the sortable with the distance option specified:
Инициализация Сортируемого с определенной опцией distance:

$( ".selector" ).sortable({ distance: 5 });


Get or set the distance option, after initialization:
Можно получить или установить опцию distance после инициализации:

// getter
var distance = $( ".selector" ).sortable( "option", "distance" );
 
// setter
$( ".selector" ).sortable( "option", "distance", 5 );



dropOnEmpty
Type: Boolean
Default: true

If false, items from this sortable can't be dropped on an empty connect sortable (see the connectWith option).
Если установлена на значение false (ложь), пункты из данного Сортируемого списка не могут быть брошены на пустой Сортируемый (см опцию connectWith)

Code examples: (Примеры кода: )
Initialize the sortable with the dropOnEmpty option specified:
Инициализация Сортируемого с определенной опцией dropOnEmpty:

$( ".selector" ).sortable({ dropOnEmpty: false });


Get or set the dropOnEmpty option, after initialization:
Можно получить или установить опцию dropOnEmpty после инициализации:

// getter
var dropOnEmpty = $( ".selector" ).sortable( "option", "dropOnEmpty" );
 
// setter
$( ".selector" ).sortable( "option", "dropOnEmpty", false );



forceHelperSize
Type: Boolean
Default: false

If true, forces the helper to have a size.
Если установлена на значение true (истина), то это заставляет помошника иметь размер.

Code examples: (Примеры кода: )
Initialize the sortable with the forceHelperSize option specified:
Инициализация Сортируемого с определенной опцией forceHelperSize:

$( ".selector" ).sortable({ forceHelperSize: true });


Get or set the forceHelperSize option, after initialization:
Можно получить или установить опцию forceHelperSize после инициализации:

// getter
var forceHelperSize = $( ".selector" ).sortable( "option", "forceHelperSize" );
 
// setter
$( ".selector" ).sortable( "option", "forceHelperSize", true );



forcePlaceholderSize
Type: Boolean
Default: false

If true, forces the placeholder to have a size.
Если установлена на значение true (истина), то это заставляет место падения иметь размер.

Code examples: (Примеры кода: )
Initialize the sortable with the forcePlaceholderSize option specified:
Инициализация Сортируемого с определенной опцией forcePlaceholderSize:

$( ".selector" ).sortable({ forcePlaceholderSize: true });


Get or set the forcePlaceholderSize option, after initialization:
Можно получить или установить опцию forcePlaceholderSize после инициализации:

// getter
var forcePlaceholderSize = $( ".selector" ).sortable( "option", "forcePlaceholderSize" );
 
// setter
$( ".selector" ).sortable( "option", "forcePlaceholderSize", true );



grid
Type: Array
Default: false

Snaps the sorting element or helper to a grid, every x and y pixels. Array values: [ x, y ].
Захватывает сортируемый элемент или хелпер в градуированную таблицу с равными ячейками, каждый пиксель по осям x и y. Значения массива: [ x, y ].

Code examples: (Примеры кода: )
Initialize the sortable with the grid option specified:
Инициализация Сортируемого с определенной опцией grid:

$( ".selector" ).sortable({ grid: [ 20, 10 ] });


Get or set the grid option, after initialization:
Можно получить или установить опцию grid после инициализации:

// getter
var grid = $( ".selector" ).sortable( "option", "grid" );
 
// setter
$( ".selector" ).sortable( "option", "grid", [ 20, 10 ] );



handle
Type: Selector or Element
Default: false

Restricts sort start click to the specified element.
Ограничивает стартовый сортировочный клик на определенном элементе.

Code examples: (Примеры кода: )
Initialize the sortable with the handle option specified:
Инициализация Сортируемого с определенной опцией handle:

$( ".selector" ).sortable({ handle: ".handle" });


Get or set the handle option, after initialization:
Можно получить или установить опцию handle после инициализации:

// getter
var handle = $( ".selector" ).sortable( "option", "handle" );
 
// setter
$( ".selector" ).sortable( "option", "handle", ".handle" );



helper
Type: String or Function()
Default: "original"

Allows for a helper element to be used for dragging display.
Позволяет использовать элемент-помошник для показа перетаскивания.

Multiple types supported:
Поддерживаются множественные типы:
• String (Строка): If set to "clone", then the element will be cloned and the clone will be dragged. Если установлена на значение "clone" (клон), то элемент будет клонирован и перетаскиваться будет именно клон. • Function (Функция): A function that will return a DOMElement to use while dragging. The function receives the event and the element being sorted. Функция, которая возвратит элемент ДОМа для использования во время перетаскивания. Функция получает событие и сортируемый элемент.

Code examples: (Примеры кода: )
Initialize the sortable with the helper option specified:
Инициализация Сортируемого с определенной опцией helper:

$( ".selector" ).sortable({ helper: "clone" });


Get or set the helper option, after initialization:
Можно получить или установить опцию helper после инициализации:

// getter
var helper = $( ".selector" ).sortable( "option", "helper" );
 
// setter
$( ".selector" ).sortable( "option", "helper", "clone" );



items
Type: Selector
Default: "> *"

Specifies which items inside the element should be sortable.
Определяет, какие пункты внутри элемента будут сортироваться.

Code examples: (Примеры кода: )
Initialize the sortable with the items option specified:
Инициализация Сортируемого с определенной опцией handle:

$( ".selector" ).sortable({ items: "> li" });


Get or set the items option, after initialization:
Можно получить или установить опцию handle после инициализации:

// getter
var items = $( ".selector" ).sortable( "option", "items" );
 
// setter
$( ".selector" ).sortable( "option", "items", "> li" );



opacity
Type: Number
Default: false

Defines the opacity of the helper while sorting. From 0.01 to 1.
Определяет прозрачность помошника на время сортировки. От 0.01 до 1.

Code examples: (Примеры кода: )
Initialize the sortable with the opacity option specified:
Инициализация Сортируемого с определенной опцией opacity:

Code examples:

Initialize the sortable with the opacity option specified:

$( ".selector" ).sortable({ opacity: 0.5 });


Get or set the opacity option, after initialization:
Можно получить или установить опцию opacity после инициализации:

// getter
var opacity = $( ".selector" ).sortable( "option", "opacity" );
 
// setter
$( ".selector" ).sortable( "option", "opacity", 0.5 );



placeholder
Type: String
Default: false

A class name that gets applied to the otherwise white space.
Имя класса, к которому обращаются для изменения белого пространства.

Code examples: (Примеры кода: )
Initialize the sortable with the placeholder option specified:
Инициализация Сортируемого с определенной опцией placeholder:

$( ".selector" ).sortable({ placeholder: "sortable-placeholder" });


Get or set the placeholder option, after initialization:
Можно получить или установить опцию placeholder после инициализации:

// getter
var placeholder = $( ".selector" ).sortable( "option", "placeholder" );
 
// setter
$( ".selector" ).sortable( "option", "placeholder", "sortable-placeholder" );



revert
Type: Boolean or Number
Default: false

Whether the sortable items should revert to their new positions using a smooth animation.
Должны ли сортируемые пункты переходить на свои новые позиции используя мягкую анимацию.

Multiple types supported:
Поддерживаются множественные типы:
• Boolean (Двоичная Логика): When set to true, the items will animate with the default duration. Когда установлена на значение true (истина), пункты будут анимированы с дефолтной продолжительностью.
• Number (Число): The duration for the animation, in milliseconds. Продолжительность анимации в миллисекундах.

Code examples: (Примеры кода: )
Initialize the sortable with the revert option specified:
Инициализация Сортируемого с определенной опцией revert:

$( ".selector" ).sortable({ revert: true });


Get or set the revert option, after initialization:
Можно получить или установить опцию revert после инициализации:

// getter
var revert = $( ".selector" ).sortable( "option", "revert" );
 
// setter
$( ".selector" ).sortable( "option", "revert", true );



scroll
Type: Boolean
Default: true

If set to true, the page scrolls when coming to an edge.
Если установлена на значение true (истина), страничка будет прокручиваться при приближении к концу.

Code examples: (Примеры кода: )
Initialize the sortable with the scroll option specified:
Инициализация Сортируемого с определенной опцией scroll:

$( ".selector" ).sortable({ scroll: false });


Get or set the scroll option, after initialization:
Можно получить или установить опцию scroll после инициализации:

// getter
var scroll = $( ".selector" ).sortable( "option", "scroll" );
 
// setter
$( ".selector" ).sortable( "option", "scroll", false );



scrollSensitivity
Type: Number
Default: 20

Defines how near the mouse must be to an edge to start scrolling.
Определяет, насколько мышка должна приблизиться к концу странички для старта скроллинга.

Code examples: (Примеры кода: )
Initialize the sortable with the scrollSensitivity option specified:
Инициализация Сортируемого с определенной опцией scroll:

$( ".selector" ).sortable({ scrollSensitivity: 10 });


Get or set the scrollSensitivity option, after initialization:
Можно получить или установить опцию scroll после инициализации:

// getter
var scrollSensitivity = $( ".selector" ).sortable( "option", "scrollSensitivity" );
 
// setter
$( ".selector" ).sortable( "option", "scrollSensitivity", 10 );



scrollSpeed
Type: Number
Default: 20

The speed at which the window should scroll once the mouse pointer gets within the scrollSensitivity distance.
Определяет скорость с которой окно должно скроллироваться, когда указатель мышки приблизится к концу странички на расстояние, указанное в опции scrollSensitivity (чувствительность скроллинга).

Code examples: (Примеры кода: )
Initialize the sortable with the scrollSpeed option specified:
Инициализация Сортируемого с определенной опцией scroll:

$( ".selector" ).sortable({ scrollSpeed: 40 });


Get or set the scrollSpeed option, after initialization:
Можно получить или установить опцию scroll после инициализации:

// getter
var scrollSpeed = $( ".selector" ).sortable( "option", "scrollSpeed" );
 
// setter
$( ".selector" ).sortable( "option", "scrollSpeed", 40 );



tolerance
Type: String
Default: "intersect"

Specifies which mode to use for testing whether the item being moved is hovering over another item. Possible values:
Определяет, какой мод использовать для тестирования, накрыл ли двигаемый пункт другой пункт. Возможные значения:

• "intersect" (покрытие): The item overlaps the other item by at least 50%. Пункт покрыл другой пункт по меньшей мере на 50%.
• "pointer" (указатель): The mouse pointer overlaps the other item. Указатель мыши указал на другой пункт.

Code examples: (Примеры кода: )
Initialize the sortable with the tolerance option specified:
Инициализация Сортируемого с определенной опцией tolerance:

$( ".selector" ).sortable({ tolerance: "pointer" });


Get or set the tolerance option, after initialization:
Можно получить или установить опцию tolerance после инициализации:

// getter
var tolerance = $( ".selector" ).sortable( "option", "tolerance" );
 
// setter
$( ".selector" ).sortable( "option", "tolerance", "pointer" );



zIndex
Type: Integer
Default: 1000

Z-index for element/helper while being sorted.
Значение зет-индекса (z-index) для элемента/хелпера во время сортировки.

Code examples: (Примеры кода: )
Initialize the sortable with the zIndex option specified:
Инициализация Сортируемого с определенной опцией zIndex:

$( ".selector" ).sortable({ zIndex: 9999 });


Get or set the zIndex option, after initialization:
Можно получить или установить опцию zIndex после инициализации:

// getter
var zIndex = $( ".selector" ).sortable( "option", "zIndex" );
 
// setter
$( ".selector" ).sortable( "option", "zIndex", 9999 );



Methods (Методы)



cancel()
Cancels a change in the current sortable and reverts it to the state prior to when the current sort was started. Useful in the stop and receive callback functions.
• This method does not accept any arguments.

Отменяет изменение в текущем Сортируемом и возвращает его в первоначальное состояние в момент, когда текущая сортировка была начата. Метод полезен в функциях обратного вызова stop (остановить) и receive (получить).
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the cancel method:
Запуск метода cancel (отменить):
$( ".selector" ).sortable( "cancel" );



destroy()
Removes the sortable functionality completely. This will return the element back to its pre-init state.
• This method does not accept any arguments.

Полностью удаляет функциональность Сортируемого. Возвращает элемент обратно в состояние до инициализации.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the destroy method:
Запуск метода destroy (разрушить):
$( ".selector" ).sortable( "destroy" );



disable()
Disables the sortable.
• This method does not accept any arguments.

Выключает Сортировку.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the disable method:
Запуск метода disable (выключить):
$( ".selector" ).sortable( "disable" );



enable()
Enables the sortable.
• This method does not accept any arguments.

Включает Сортировку.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the enable method:
Запуск метода enable (включить):
$( ".selector" ).sortable( "enable" );



option( optionName )
Returns: Object
Gets the value currently associated with the specified optionName.
Получает значение, связанное с определенным optionName (имя опции).
• optionName
Type: String
The name of the option to get.
Имя опции, для которой получаем значение.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
var isDisabled = $( ".selector" ).sortable( "option", "disabled" );



option()
Returns: PlainObject
Gets an object containing key/value pairs representing the current sortable options hash.
• This method does not accept any arguments.

Получает объект, содержащий пары key/value (ключ/значение), представляющий текущее состояние набора значений Сортируемого.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
var options = $( ".selector" ).sortable( "option" );



option( optionName, value )
Sets the value of the sortable option associated with the specified optionName.
Устанавливает значение опции Сортируемого, связанное с определенным optionName (именем опции).

• optionName
Type: String
The name of the option to set.
Имя опции для установки.

• value
Type: Object
A value to set for the option.
Значение, которое устанавливается для опции.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
$( ".selector" ).sortable( "option", "disabled", true );



option( options )
Sets one or more options for the sortable.

Устанавливает одну или более опций для Сортируемого.

• options
Type: Object
A map of option-value pairs to set.
Карта пар option-value (опция-значение) для установки.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
$( ".selector" ).sortable( "option", { disabled: true } );



refresh()
Refresh the sortable items. Triggers the reloading of all sortable items, causing new items to be recognized.
• This method does not accept any arguments.

Обновляет Сортируемые пункты. Триггеры перегружают все сортируемые пункты, вызывая опознование новых пунктов.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the refresh method:
Запуск метода refresh (обновить):
$( ".selector" ).sortable( "refresh" );



refreshPositions()
Refresh the cached positions of the sortable items. Calling this method refreshes the cached item positions of all sortables.
• This method does not accept any arguments.

Обновляет закэшированные позиции Сортируемых пунктов. Вызов этого метода обновляет закэшированные позиции всех Сортируемых пунктов..
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the refreshPositions method:
Запуск метода refreshPositions (обновить Позиции):
$( ".selector" ).sortable( "refreshPositions" );



serialize( options )
Serializes the sortable's item ids into a form/ajax submittable string. Calling this method produces a hash that can be appended to any url to easily submit a new item order back to the server.

It works by default by looking at the id of each item in the format "setname_number", and it spits out a hash like "setname[]=number&setname[]=number".

Note: If serialize returns an empty string, make sure the id attributes include an underscore. They must be in the form: "set_number" For example, a 3 element list with id attributes "foo_1", "foo_5", "foo_2" will serialize to "foo[]=1&foo[]=5&foo[]=2". You can use an underscore, equal sign or hyphen to separate the set and number. For example "foo=1", "foo-1", and "foo_1" all serialize to "foo[]=1".

Организует коды (идишники) Сортируемых пунктов в строку передачи данных типа форма/аджакс (form/ajax). Вызов этого метода производит хэш, кторый может быть присоединен к любому урлу, чтобы удобно передавать информацию о новом пункте обратно серверу.

Это работает по умолчанию путем просмотра кода (идишника) каждого пункта в формате "setname_number" (имяустановки_номер), а затем трансформируется в хэш типа такого: "setname[]=number&setname[]=number".

Обратите вимание. Если после организации возвращается пустая строка, следует убедиться, что коды (идишники) включают знаки подчеркивания. Они должны иметь формат: "set_number" (установить_номер). Например список из 3-х элементов с идишниками (id) "foo_1", "foo_5", "foo_2" будут организованы в строку "foo[]=1&foo[]=5&foo[]=2". Вы можете использовать знак подчеркивания, знак равенства, знак минуса, чтобы отделить установку и число. Например: "foo=1", "foo-1" и "foo_1", все они будут организованы в "foo[]=1".

• options
Type: Object (Объект)
Options to customize the serialization.
Опции для установки пользовательских параметров организации-сериализации

◦ key (default: the part of the attribute in front of the separator)
Type: String
Replaces part1[] with the specified value.

◦ attribute (default: "id")
Type: String
The name of the attribute to use for the values.

◦ expression (default: /(.+)[-=_](.+)/)
Type: RegExp
A regular expression used to split the attribute value into key and value parts.

Code examples: (Примеры кода: )
Invoke the serialize method:
Запуск метода serialize (организовать-сериализовать):
var sorted = $( ".selector" ).sortable( "serialize", { key: "sort" } );



toArray
Returns: Array (Массив)

Serializes the sortable's item id's into an array of string.
• This method does not accept any arguments.

Организует идишники Сортируемых пунктов в Массив строки.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the toArray method:
Запуск метода toArray (вМассив):
var sortedIDs = $( ".selector" ).sortable( "toArray" );



widget()
Returns a jQuery object containing the sortable element.
• This method does not accept any arguments.

Возвращает объект jQuery, содержащий Сортируемый элемент.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the widget method:
Запуск метода виджета:
var widget = $( ".selector" ).sortable( "widget" );



Events (События)



activate( event, ui )
Type: sortactivate

This event is triggered when using connected lists, every connected list on drag start receives it.

• event
Type: Event

• ui
Type: Object

◦ helper
Type: jQuery
The jQuery object representing the helper being sorted

◦ item
Type: jQuery
The jQuery object representing the current dragged element

◦ offset
Type: Object
The current absolute position of the helper represented as { top, left }

◦ position
Type: Object
The current position of the helper represented as { top, left }

◦ originalPosition
Type: Object
The original position of the element represented as { top, left }

◦ sender
Type: jQuery
The sortable that the item comes from if moving from one sortable to another

Code examples: (Примеры кода: )
Initialize the sortable with the activate callback specified:
$( ".selector" ).sortable({
    activate: function( event, ui ) {}
});


Bind an event listener to the sortactivate event:
$( ".selector" ).on( "sortactivate", function( event, ui ) {} );



beforeStop( event, ui )
Type: sortactivate

This event is triggered when sorting stops, but when the placeholder/helper is still available.

• event
Type: Event

• ui
Type: Object

◦ helper
Type: jQuery
The jQuery object representing the helper being sorted

◦ item
Type: jQuery
The jQuery object representing the current dragged element

◦ offset
Type: Object
The current absolute position of the helper represented as { top, left }

◦ position
Type: Object
The current position of the helper represented as { top, left }

◦ originalPosition
Type: Object
The original position of the element represented as { top, left }

◦ sender
Type: jQuery
The sortable that the item comes from if moving from one sortable to another

Code examples: (Примеры кода: )
Initialize the sortable with the beforeStop callback specified:
$( ".selector" ).sortable({
    beforeStop: function( event, ui ) {}
});


Bind an event listener to the sortbeforestop event:
$( ".selector" ).on( "sortbeforestop", function( event, ui ) {} );



change( event, ui )
Type: sortchange

This event is triggered during sorting, but only when the DOM position has changed.

• event
Type: Event

• ui
Type: Object

◦ helper
Type: jQuery
The jQuery object representing the helper being sorted

◦ item
Type: jQuery
The jQuery object representing the current dragged element

◦ offset
Type: Object
The current absolute position of the helper represented as { top, left }

◦ position
Type: Object
The current position of the helper represented as { top, left }

◦ originalPosition
Type: Object
The original position of the element represented as { top, left }

◦ sender
Type: jQuery
The sortable that the item comes from if moving from one sortable to another

Code examples: (Примеры кода: )
Initialize the sortable with the change callback specified:
$( ".selector" ).sortable({
    change: function( event, ui ) {}
});


Bind an event listener to the sortchange event:
$( ".selector" ).on( "sortchange", function( event, ui ) {} );



create( event, ui )
Type: sortcreate

Triggered when the sortable is created.

• event
Type: Event

• ui
Type: Object

Code examples: (Примеры кода: )
Initialize the sortable with the create callback specified:
$( ".selector" ).sortable({
    create: function( event, ui ) {}
});


Bind an event listener to the dropcreate event:
$( ".selector" ).on( "sortcreate", function( event, ui ) {} );



deactivate( event, ui )
Type: sortdeactivate

This event is triggered when sorting was stopped, is propagated to all possible connected lists.

• event
Type: Event

• ui
Type: Object

◦ helper
Type: jQuery
The jQuery object representing the helper being sorted

◦ item
Type: jQuery
The jQuery object representing the current dragged element

◦ offset
Type: Object
The current absolute position of the helper represented as { top, left }

◦ position
Type: Object
The current position of the helper represented as { top, left }

◦ originalPosition
Type: Object
The original position of the element represented as { top, left }

◦ sender
Type: jQuery
The sortable that the item comes from if moving from one sortable to another

Code examples: (Примеры кода: )
Initialize the sortable with the deactivate callback specified:
$( ".selector" ).sortable({
    deactivate: function( event, ui ) {}
});


Bind an event listener to the sortdeactivate event:
$( ".selector" ).on( "sortdeactivate", function( event, ui ) {} );



out( event, ui )
Type: sortout

This event is triggered when a sortable item is moved away from a connected list.

• event
Type: Event

• ui
Type: Object

◦ helper
Type: jQuery
The jQuery object representing the helper being sorted

◦ item
Type: jQuery
The jQuery object representing the current dragged element

◦ offset
Type: Object
The current absolute position of the helper represented as { top, left }

◦ position
Type: Object
The current position of the helper represented as { top, left }

◦ originalPosition
Type: Object
The original position of the element represented as { top, left }

◦ sender
Type: jQuery
The sortable that the item comes from if moving from one sortable to another

Code examples: (Примеры кода: )
Initialize the sortable with the out callback specified:
$( ".selector" ).sortable({
    out: function( event, ui ) {}
});


Bind an event listener to the sortout event:
$( ".selector" ).on( "sortout", function( event, ui ) {} );



over( event, ui )
Type: sortover

This event is triggered when a sortable item is moved into a connected list.

• event
Type: Event

• ui
Type: Object

◦ helper
Type: jQuery
The jQuery object representing the helper being sorted

◦ item
Type: jQuery
The jQuery object representing the current dragged element

◦ offset
Type: Object
The current absolute position of the helper represented as { top, left }

◦ position
Type: Object
The current position of the helper represented as { top, left }

◦ originalPosition
Type: Object
The original position of the element represented as { top, left }

◦ sender
Type: jQuery
The sortable that the item comes from if moving from one sortable to another

Code examples: (Примеры кода: )
Initialize the sortable with the over callback specified:
$( ".selector" ).sortable({
    over: function( event, ui ) {}
});


Bind an event listener to the sortover event:
$( ".selector" ).on( "sortover", function( event, ui ) {} );



receive( event, ui )
Type: sortreceive

This event is triggered when a connected sortable list has received an item from another list.

• event
Type: Event

• ui
Type: Object

◦ helper
Type: jQuery
The jQuery object representing the helper being sorted

◦ item
Type: jQuery
The jQuery object representing the current dragged element

◦ offset
Type: Object
The current absolute position of the helper represented as { top, left }

◦ position
Type: Object
The current position of the helper represented as { top, left }

◦ originalPosition
Type: Object
The original position of the element represented as { top, left }

◦ sender
Type: jQuery
The sortable that the item comes from if moving from one sortable to another

Code examples: (Примеры кода: )
Initialize the sortable with the receive callback specified:
$( ".selector" ).sortable({
    receive: function( event, ui ) {}
});


Bind an event listener to the sortreceive event:
$( ".selector" ).on( "sortreceive", function( event, ui ) {} );



remove( event, ui )
Type: sortremove

This event is triggered when a sortable item has been dragged out from the list and into another.

• event
Type: Event

• ui
Type: Object

◦ helper
Type: jQuery
The jQuery object representing the helper being sorted

◦ item
Type: jQuery
The jQuery object representing the current dragged element

◦ offset
Type: Object
The current absolute position of the helper represented as { top, left }

◦ position
Type: Object
The current position of the helper represented as { top, left }

◦ originalPosition
Type: Object
The original position of the element represented as { top, left }

◦ sender
Type: jQuery
The sortable that the item comes from if moving from one sortable to another

Code examples: (Примеры кода: )
Initialize the sortable with the remove callback specified:
$( ".selector" ).sortable({
    remove: function( event, ui ) {}
});


Bind an event listener to the sortremove event:
$( ".selector" ).on( "sortremove", function( event, ui ) {} );



sort( event, ui )
Type: sort

This event is triggered during sorting.

• event
Type: Event

• ui
Type: Object

◦ helper
Type: jQuery
The jQuery object representing the helper being sorted

◦ item
Type: jQuery
The jQuery object representing the current dragged element

◦ offset
Type: Object
The current absolute position of the helper represented as { top, left }

◦ position
Type: Object
The current position of the helper represented as { top, left }

◦ originalPosition
Type: Object
The original position of the element represented as { top, left }

◦ sender
Type: jQuery
The sortable that the item comes from if moving from one sortable to another

Code examples: (Примеры кода: )
Initialize the sortable with the sort callback specified:
$( ".selector" ).sortable({
    sort: function( event, ui ) {}
});


Bind an event listener to the sort event:
$( ".selector" ).on( "sort", function( event, ui ) {} );



start( event, ui )
Type: sortstart

This event is triggered when sorting starts.

• event
Type: Event

• ui
Type: Object

◦ helper
Type: jQuery
The jQuery object representing the helper being sorted

◦ item
Type: jQuery
The jQuery object representing the current dragged element

◦ offset
Type: Object
The current absolute position of the helper represented as { top, left }

◦ position
Type: Object
The current position of the helper represented as { top, left }

◦ originalPosition
Type: Object
The original position of the element represented as { top, left }

◦ sender
Type: jQuery
The sortable that the item comes from if moving from one sortable to another

Code examples: (Примеры кода: )
Initialize the sortable with the start callback specified:
$( ".selector" ).sortable({
    start: function( event, ui ) {}
});


Bind an event listener to the sortstart event:
$( ".selector" ).on( "sortstart", function( event, ui ) {} );



stop( event, ui )
Type: sortstop

This event is triggered when sorting has stopped.

• event
Type: Event

• ui
Type: Object

◦ helper
Type: jQuery
The jQuery object representing the helper being sorted

◦ item
Type: jQuery
The jQuery object representing the current dragged element

◦ offset
Type: Object
The current absolute position of the helper represented as { top, left }

◦ position
Type: Object
The current position of the helper represented as { top, left }

◦ originalPosition
Type: Object
The original position of the element represented as { top, left }

◦ sender
Type: jQuery
The sortable that the item comes from if moving from one sortable to another

Code examples: (Примеры кода: )
Initialize the sortable with the stop callback specified:
$( ".selector" ).sortable({
    stop: function( event, ui ) {}
});


Bind an event listener to the sortstop event:
$( ".selector" ).on( "sortstop", function( event, ui ) {} );



update( event, ui )
Type: sortupdate

This event is triggered when the user stopped sorting and the DOM position has changed.

• event
Type: Event

• ui
Type: Object

◦ helper
Type: jQuery
The jQuery object representing the helper being sorted

◦ item
Type: jQuery
The jQuery object representing the current dragged element

◦ offset
Type: Object
The current absolute position of the helper represented as { top, left }

◦ position
Type: Object
The current position of the helper represented as { top, left }

◦ originalPosition
Type: Object
The original position of the element represented as { top, left }

◦ sender
Type: jQuery
The sortable that the item comes from if moving from one sortable to another

Code examples: (Примеры кода: )
Initialize the sortable with the update callback specified:
$( ".selector" ).sortable({
    update: function( event, ui ) {}
});


Bind an event listener to the sortupdate event:
$( ".selector" ).on( "sortupdate", function( event, ui ) {} );



Overview (Обзор)
The jQuery UI Sortable plugin makes selected elements sortable by dragging with the mouse.

Note: In order to sort table rows, the tbody must be made sortable, not the table.

Плагин jQuery UI Сортируемый (Sortable) делает выбранные элементы Сортируемыми с помощью переноса мышкой.

Обратите внимание. Чтобы сортировать табличные ряды, Сортируемым следует сделать tbody, а не саму таблицу.



Additional Notes (Дополнительная информация)
• This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
• Этот виджет требует определенных стилей CSS, иначе он не будет работать. Если вы используете адаптированную схему, оттолкитесь в своей разработке от специализированного файла CSS.



Example:



Example: A simple jQuery UI Sortable.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>sortable demo</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
</head>
<body>
 
<ul id="sortable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
 
<script>$("#sortable").sortable();</script>
 
</body>
</html>
Этот пример можно посмотреть здесь.



Примеры Сортируемого на этом сайте: Дефолтный, Оставляющий След, Соединительный, Табулированный, Пустые списки, ВКЛ/ВЫкл, Сдерженный, Шкала, Портлеты.



Если вы планируете вернуться сюда позднее...
Пожалуйста, запомните эту страничку -
URL: http://kocby.ru/post/webmaster/jquery/ui/sortable/
Спасибо за посещение этой странички и внимательное отношение к ее контенту и дизайну. Удачи и успеха!
© KOCBY.RU :: перепечатка материалов разрешается с указанием ссылки на домен KOCBY.RU ©
Basket is empty :: Корзина пустая
Close and hide in basket :: Закрыть и спрятать в корзину
Посмотри в зеркало! Что там видно?
Красивая девушка брюнетка слева Красивая девушка блондинка справа




Close and hide in basket :: Закрыть и спрятать в корзину статистическую информацию о посетителях Клуба.
Створки зеркала Клуба Одиноких Сердец.
Красивая девушка блондинка слева Красивая девушка брюнетка справа