♥ § Клуб Одиноких Сердец :: Элемент Переноситель (Draggable) плагина UI библиотеки jQuery ♥

Описание: Дает возможность двигать объекты мышкой по экрану.
Description: Allow elements to be moved using the mouse.

Пример странички Переноситель дефолтный (Default functionality):
можно посмотреть здесь.

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

Пример странички Переноситель Рангированный (Constrain movement):
можно посмотреть здесь.

Пример странички Переноситель Замедленный (Delay start):
можно посмотреть здесь.

Пример странички Переноситель Меченный (Snap to element or grid):
можно посмотреть здесь.

Пример странички Переноситель Автоматический (Auto-scroll):
можно посмотреть здесь.

Пример странички Переноситель со сменой мест (Revert position):
можно посмотреть здесь.

Пример странички Переноситель с откликом (Visual feedback):
можно посмотреть здесь.

Пример странички Переноситель с ручкой (Drag handle):
можно посмотреть здесь.

Пример странички Переноситель Курсорный (Cursor style):
можно посмотреть здесь.

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

---

Теория

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

---

Options (Опции)

---

addClasses
Type: Boolean
Default: true

If set to false, will prevent the ui-draggable class from being added. This may be desired as a performance optimization when calling .draggable() on hundreds of elements.
Если опция установлена на значение false (ложь), это предотвращает добавление класса ui-draggable. Это может быть полезно для оптимизации, когда .draggable() вызывается на сотнях элементов.

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



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

---

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

Which element the draggable helper should be appended to while dragging.
Определяет, к какому элементу переносимый хелпер будет присоеденен во время переноса.

Multiple types supported:
• jQuery: A jQuery object containing the element to append the helper to.
• 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 draggable.

Поддерживаются множественные типы:
• jQuery (Объект jQuery): Объект jQuery, содержащий элемент, к которому присоеденяется хелпер.
• Element (Элемент): Элемент, к которому присоеденяется хелпер.
• Selector (Селектор): Селектор, определяющий, к какому элементу будет присоеденен хелпер.
• String (Строка): Строка "parent" (родитель) вызовет хелпер стать родственником переносимому.

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



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

---

axis
Type: String
Default: false

Constrains dragging to either the horizontal (x) or vertical (y) axis. Possible values: "x", "y".
Устанавливает переноску либо по горизонтальной оси (x), либо по вертикальной оси (y). Возможные значения: "x", "y".

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



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

---

cancel
Type: Selector
Default: "input,textarea,button,select,option"

Prevents dragging from starting on specified elements.
Предотвращает перенос с самого старта для определенных элементов.

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



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

---

connectToSortable
Type: Selector
Default: false

Allows the draggable to be dropped onto the specified sortables. If this option is used, a draggable can be dropped onto a sortable list and then becomes part of it. Note: The helper option must be set to "clone" in order to work flawlessly. Requires the jQuery UI Sortable plugin to be included.
Позволяет Переносимому упасть на определенные сортируемые. Если используется эта опция, Переносимый может упасть в список сортируемых и затем быть в этом списке. Внимание: опция helper (хелпер, помощник) должна быть установлена на значение "clone" (клон), чтобы процесс шел без глюков. Требуется, чтобы плагин jQuery UI Sortable был подключен.

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



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

---

containment
Type: Selector or Element or String or Array
Default: false

Constrains dragging to within the bounds of the specified element or region.
Определяет границы переноса внутри определенного элемента или области.

Multiple types supported:
• Selector: The draggable element will be contained to the bounding box of the first element found by the selector. If no element is found, no containment will be set.
• Element: The draggable element will be contained to the bounding box of this element.
• String: Possible values: "parent", "document", "window".
• Array: An array defining a bounding box in the form [ x1, y1, x2, y2 ].

Поддерживаются множественные типы:
• Selector (Селектор): Переносимый элемент будет содержаться в области первого элемента, найденного по данному селектору. Если по селектору не найдено ни одного элемента, то контейнер не будет установлен.
• Element (Элемент): Переносимый элемент будет содержаться в границах данного элемента.
• String (Строка): Возможные значения: "parent" (родитель), "document" (документ), "window" (окно).
• Array (Массив): Массив определяет координаты углов квадрата, который будет являться областью для переносимого в виде [ x1, y1, x2, y2 ].

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



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

---

cursor
Type: String
Default: "auto"

The CSS cursor during the drag operation.
Вид курсора по стандартам CSS в течение операции переноса.

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



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

---

cursorAt
Type: Object
Default: false

Sets the offset of the dragging helper relative to the mouse cursor. 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 Draggable with the cursorAt option specified:
Инициализация Переносителя с определенной опцией cursorAt:



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

---

delay
Type: Number
Default: 0

Time in milliseconds after mousedown until dragging should start. This option can be used to prevent unwanted drags when clicking on an element.
Время задержки в миллисекундах после нажатия мыши, после которой перемещение должно начаться. Эта опция может быть использована для избежания ненужных случайных перемещений по клику на элементе.

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



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

---

disabled
Type: Boolean
Default: false

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

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



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

---

distance
Type: Number
Default: 1

Distance in pixels after mousedown the mouse must move before dragging should start. This option can be used to prevent unwanted drags when clicking on an element.
Расстояние в пикселях, которое должна пройти мышь после нажатия перед тем как начнется процесс перетаскивания. Эта опция может быть использована для избежания ненужных случайных перемещений по клику на элементе.

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



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

---

grid
Type: Array
Default: false

Snaps the dragging helper to a grid, every x and y pixels. The array must be of the form [ x, y ].
Захватывает перетаскиваемый хелпер в грид, каждый пиксель x и y. Массив должен быть типа [ x, y ].

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



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

---

handle
Type: Selector or Element
Default: false

If specified, restricts dragging from starting unless the mousedown occurs on the specified element(s).
Если опция handle (ручка) определена, то захват для перетаскивания ограничен определенными элементами.

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



Get or set the handle option, after initialization:
Можно получить или установить опцию 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.
• Function: A function that will return a DOM Element to use while dragging.

Поддерживаются множественные типы:
• String (Строка): Если установлено значение "clone" (клон), тогда элемент будет клонирован и клон будет перетаскиваться.
• Function (Функция): Функция, которая возвратит элемент ДОМа для использования в течение перетаскивания.

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



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

---

iframeFix
Type: Boolean or Selector
Default: false

Prevent iframes from capturing the mousemove events during a drag. Useful in combination with the cursorAt option, or in any case where the mouse cursor may not be over the helper.
Предотвращает iframes от захвата во время перетаскивания.

Multiple types supported:
• Boolean: When set to true, transparent overlays will be placed over all iframes on the page.
• Selector: Any iframes matching the selector will be covered by transparent overlays.

Поддерживаются множественные типы:
• Boolean (Логический): Если установлен на значение true (истина), прозрачные оверлеи будут расположены поверх всех фреймов на этой страничке.
• Selector (Селектор): Любые фреймы, соответствующие селектору будут перекрыты прозрачными оверлеями.

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



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

---

opacity
Type: Number
Default: false

Opacity for the helper while being dragged.
Значение прозрачности для хелпера во время перетаскивания.

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



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

---

refreshPositions
Type: Boolean
Default: false

If set to true, all droppable positions are calculated on every mousemove. Caution: This solves issues on highly dynamic pages, but dramatically decreases performance.
Если опция установлена на значение true (истина), все позиции падения пересчитываются при каждом движении мыши. Осторожно: Это решает проблемы для высоко динамических страниц, но сильно снижает производительность.

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



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

---

revert
Type: Boolean or String
Default: false

Whether the element should revert to its start position when dragging stops.
Будет ли элемент возвращен на исходную позицию при окончании перетаскивания.

Multiple types supported:
• Boolean: If set to true the element will always revert.
• String: If set to "invalid", revert will only occur if the draggable has not been dropped on a droppable. For "valid", it's the other way around.

Поддерживаются множественные типы:
• Boolean (Логический): Если установлен на значение true (истина), элемент всегда будет возвращен.
• String (Строка): Если установлен на значение "invalid" (невалидный), возврат элемента произойдет, если перетаскиваемый не был брошен в место, разрещенное для бросания. Для значения "valid" (валидный), наоборот.

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



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

---

revertDuration
Type: Number
Default: 500

The duration of the revert animation, in milliseconds. Ignored if the revert option is false.
Продолжительность анимации возвращения в миллисекундах. Игнорируется, если опция revert установлена на значение false (ложь).

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



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

---

scope
Type: String
Default: "default"

Used to group sets of draggable and droppable items, in addition to droppable's accept option. A draggable with the same scope value as a droppable will be accepted by the droppable.
Используется для групповой установки значений draggable (перетаскиваемый) и droppable (падающий), в дополнении к опции accept (прием) падающего. Перетаскиваемый с таким же значением опции scope, как и у падающего, будет принят на место падения.

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



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

---

scroll
Type: Boolean
Default: true

If set to true, container auto-scrolls while dragging.
Если опция установлена на значение true (истина), контейнер автоматически скроллируется во время перетаскивания.

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



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

---

scrollSensitivity
Type: Number
Default: 20

Distance in pixels from the edge of the viewport after which the viewport should scroll. Distance is relative to pointer, not the draggable. Ignored if the scroll option is false.
Расстояние в пикселях от края области просмотра, после прохождения которого область просмотра начинает скроллироваться. Расстояние относительно указателя, не перетаскиваемого. Игнорируется, если опция scroll (скроллинг) установлена на значение false (ложь).

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



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

---

scrollSpeed
Type: Number
Default: 20

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

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



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

---

snap
Type: Boolean or Selector
Default: false

Whether the element should snap to other elements.
Определяет, будет ли элемент задевать другие элементы.

Multiple types supported:
• Boolean: When set to true, the element will snap to all other draggable elements.
• Selector: A selector specifying which elements to snap to.

Поддерживаются множественные типы:
• Boolean (Логический): Если установлен на значение true (истина), элемент будет задевать все другие перетаскиваемые элементы.
• Selector (Селектор): Селектор, определяющий, какие элементы будет задевать.

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



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

---

snapMode
Type: String
Default: "both"

Determines which edges of snap elements the draggable will snap to. Ignored if the snap option is false. Possible values: "inner", "outer", "both".
Определяет, какие края задеваемых элементов перетаскиваемый будет задевать. Игнорируется, если опция snap (задевать) установлена на значение false (ложь). Возможные значения: "inner" (внутренний), "outer" (внешний), "both" (оба).

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



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

---

snapTolerance
Type: Number
Default: 20

The distance in pixels from the snap element edges at which snapping should occur. Ignored if the snap option is false.
Расстояние в пикселях от краев задеваемого элемента, когда произойдет задевание. Игнорируется, если опция snap (задевать) установлена на значение false (ложь).

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



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

---

stack
Type: Boolean
Default: true

Controls the z-index of the set of elements that match the selector, always brings the currently dragged item to the front. Very useful in things like window managers.
Контролирует зет-индекс (z-index) множества элементов, соответствущих селектору, всегда выводит текущий перетаскиваемый на передний план. Очень полезная опция для управления окнами и т.д.

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



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

---

zIndex
Type: Integer
Default: false

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

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



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

---

Methods (Методы)

---

destroy()
Removes the draggable 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 (разрушить):

---

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

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

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

---

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

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

Code examples: (Примеры кода: )
Invoke the enable method:
Запуск метода 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:
Запуск метода:

---

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

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

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:

---

option( optionName, value )
Sets the value of the draggable 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:
Запуск метода:

---

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

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

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

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:

---

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

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

Code examples: (Примеры кода: )
Invoke the widget method:
Запуск метода виджета:

---

Events (События)

---

create( event, ui )
Type: dragcreate

Triggered when the draggable is created.

• event
Type: Event

• ui
Type: Object

Code examples: (Примеры кода: )
Initialize the draggable with the create callback specified:

Bind an event listener to the dragcreate event:

---

drag( event, ui )
Type: drag

Triggered while the mouse is moved during the dragging.

• event
Type: Event

• ui
Type: Object
◦ helper
Type: jQuery
The jQuery object representing the helper that's being dragged.
◦ position
Type: Object
Current CSS position of the helper as { top, left } object.
◦ offset
Type: Object
Current offset position of the helper as { top, left } object.

Code examples: (Примеры кода: )
Initialize the draggable with the drag callback specified:

Bind an event listener to the drag event:

---

start( event, ui )
Type: dragstart

Triggered when dragging starts.

• event
Type: Event

• ui
Type: Object
◦ helper
Type: jQuery
The jQuery object representing the helper that's being dragged.
◦ position
Type: Object
Current CSS position of the helper as { top, left } object.
◦ offset
Type: Object
Current offset position of the helper as { top, left } object.

Code examples: (Примеры кода: )
Initialize the draggable with the start callback specified:

Bind an event listener to the dragstart event:

---

stop( event, ui )
Type: dragstop

Triggered when dragging stops.

• event
Type: Event

• ui
Type: Object
◦ helper
Type: jQuery
The jQuery object representing the helper that's being dragged.
◦ position
Type: Object
Current CSS position of the helper as { top, left } object.
◦ offset
Type: Object
Current offset position of the helper as { top, left } object.

Code examples: (Примеры кода: )
Initialize the draggable with the stop callback specified:

Bind an event listener to the dragstop event:

---

Overview (Обзор)
Make the selected elements draggable by mouse. If you want not just drag, but drag & drop, see the jQuery UI Droppable plugin, which provides a drop target for draggables.

Делает выбранные элементы Перетаскиваемыми с помощью мыши. Если вы хотите не только таскать объект, но также и ронять его, см плагин Роняемый (jQuery UI Droppable plugin), который дает возможность ронять перетаскиваемые объекты.

---

A simple jQuery UI Draggable
Этот пример можно посмотреть здесь.

---

Примеры Переносителей на этом сайте: Дефолтный, Событейный, Рангированный, Замедленный, Меченный, Автоматический, Со сменой мест, С откликом, С ручкой, Курсорный, Сортировочный.

---