jQuery на русском - draggable(options)

Slyweb

Поиск функций jQuery

Характеристика функции

[Function] draggable(options)

Создать эффект перетаскиваемости узла, полученный из jquery.

Сигнатура

draggable(options) → jQuery

Описание

jQuery UI Draggable плагин позволяет перетаскивать узлы структуры DOM с помощью мыши.
Перетаскиваемые элементы получают класс ui-draggable. На протяжении перетаскивания для элемента также устанавливается класс ui-draggable-dragging. Если вам необходимо не только перетаскивать, но и помещать элемент(drag-and-drop), используйте плагин jQuery UI Droppable, который обеспечивает помещение перетаскиваемого объекта.
Все функции обратного вызова (callback) (start, stop, drag) принимают два аргумента: Исходное событие браузера и преобразованный объект ui, о котором указано ниже в документации (если вы указали в качестве второго аргумента 'ui'):

Пример
Весь код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="jquery-ui-1.7.2.custom.css" 
rel="stylesheet" type="text/css"/>
<script src="jquery-1.3.2.min.js"></script>
<script src="jquery-ui-1.7.2.custom.min.js"></script>  
<script>
  $(document).ready(function(){

$(function() {
		$("#draggable").draggable();
	});

  });
</script>

</head>
<body class="iframe">


<div class="demo">

<div id="draggable" 
class="ui-widget-content">
	<p>Перетащи меня</p>
</div>

</div><!-- End demo -->

<div style="display: none;" 
class="demo-description">

<p>
Enable draggable functionality on any DOM element. 
Move the draggable object by clicking on it with the mouse
and dragging it anywhere within the viewport.
</p>

</div><!-- End demo-description -->


</body>
</html>


<style>

#draggable { width: 100px; height: 100px; padding: 0.5em; }

</style>

Параметры

ui.helper

ui.position

ui.offset

Опции

Опция: addClasses

Если установлено false, будет предотвращено добавление существующего ui-draggable класса. Это может быть необходимо, для эффективной оптимизация, когда функция .draggable() вызывается для сотен элементов.

"По умолчанию установлено"true

Инициализировать функцию draggable с заданной опцией addClasses.

$('.selector').draggable({ addClasses: false });

Получить или установить опцию addClasses после инициализации.

var addClasses = $('.selector').draggable('option', 'addClasses');
//установощик
$('.selector').draggable('option', 'addClasses', false);

Опция: appendTo

Элемент, переданный или выбранный через опцию appendTo будет использован как контейнер подручного элемента в течение перемещения. По умолчанию подручный элемент присоединяется к тому же перемещаемому контейнеру.

"По умолчанию установлено"parent

Инициализировать перетаскивание с заданной опцией appendTo.

$('.selector').draggable({ appendTo: 'body' });

Получить или установить опцию appendTo после инициализации.

//getter
var appendTo = $('.selector').draggable('option', 'appendTo');
//setter
$('.selector').draggable('option', 'appendTo', 'body');

Опция: axis

Опция ограничивает перетаскивание элемента либо по горизонтали (x) либо по вертикали (y) оси координат. Доступные значения: 'x', 'y'.

"По умолчанию установлено"false

Инициализировать перетаскивание с определенной опцией axis.

$('.selector').draggable({ axis: 'x' });

Установить или получить опцию axis после запуска.

//getter
var axis = $('.selector').draggable('option', 'axis');
//setter
$('.selector').draggable('option', 'axis', 'x');

Опция: cancel

Предотвратить перетаскивание определенных элемента.

"По умолчанию установлено":input,option

Инициализировать перетаскивание с определенной опцией cancel.

$('.selector').draggable({ cancel: 'button' });

Установить или получить опцию cancel после инициализации.

//получить опцию
var cancel = $('.selector').draggable('option', 'cancel');
//установить опцию
$('.selector').draggable('option', 'cancel', 'button');

Опция: connectToSortable

Данная опция позволяет перетаскивать, чтобы быть помещенным в определенном порядке. Если данная функция используется (оция helper должна быть установлена как 'clone' чтобы безукаризннно работать), перемещенный объект может быть помещен в упорядоченный список и затем стать его частью. Примечание: Опция указанная как массив селекторов, удаляет данный массив.

"По умолчанию установлено"false

Инициализировать опцию перетаскивания connectToSortable.

$('.selector').draggable({ connectToSortable: 'ul#myList' });

Получить или установить опцию connectToSortable после инициализации.

//получить опцию
var connectToSortable = $('.selector').draggable('option', 'connectToSortable');
//установить опцию
$('.selector').draggable('option', 'connectToSortable', 'ul#myList');

Опция: containment

Данная опция ограничивает перетаскивание элемента границами определенного элемента или областью. Возможные строковые значения: 'parent', 'document', 'window', [x1, y1, x2, y2].

"По умолчанию установлено"false

Инициализировать перетаскивание с заданной опцией containment.

$('.selector').draggable({ containment: 'parent' });

Получить или установить опцию connectToSortable после инициализации.

//получить опцию
var containment = $('.selector').draggable('option', 'containment');
//установить опцию
$('.selector').draggable('option', 'containment', 'parent');

Опция: cursor

Опция устанавливает css курсор в течение перетаскиваемой операции.

"По умолчанию установлено"auto

Инициализировать опцию cursor.

$('.selector').draggable({ cursor: 'crosshair' });

Получить или установить опцию connectToSortable после инициализации.

//получить опцию
var cursor = $('.selector').draggable('option', 'cursor');
//установить опцию
$('.selector').draggable('option', 'cursor', 'crosshair');

Опция: cursorAt

При передвижении подручного элемента курсор появляется в перемещаемой форме относительно определенной позиции. Координаты могут быть получены как хеш, используя комбинацию одного или двух ключей: { top, left, right, bottom }.

"По умолчанию установлено"false

Инициализировать перетаскивание с определенной опцией cursorAt.

$('.selector').draggable({ cursorAt: { left: 5 } });

Получить или установить опцию cursorAt после инициализации.

//получить опцию
var cursorAt = $('.selector').draggable('option', 'cursorAt');
//установить опцию
$('.selector').draggable('option', 'cursorAt', { left: 5 });

Опция: delay

Опция устанавливает время в миллисекундах, по истечении которого, после события mousedown, должно начаться перетаскивание. Данная опция может быть использована для предотвращения нежелательного перетаскивания элемента при случайном щелчке мыши.

"По умолчанию установлено"0

Инициализировать перетаскивание с определенной опцией delay.

$('.selector').draggable({ delay: 500 });

Получить или установить опцию delay после инициализации.

//получить опцию
var delay = $('.selector').draggable('option', 'delay');
//установить опцию
$('.selector').draggable('option', 'delay', 500);

Опция: distance

Расстояние в пикселях, которое указатель мыши должен пройти, после события mousedown, до того как начнётся перемещение элемента. Данная опция может быть использована для предотвращения нежелательного перетаскивания элемента при случайном щелчке мыши.

"По умолчанию установлено"1

Инициализировать перетаскивание с определенной опцией distance.

$('.selector').draggable({ distance: 30 });

Получить или установить опцию distance после инициализации.

//получить опцию
var distance = $('.selector').draggable('option', 'distance');
//установить опцию
$('.selector').draggable('option', 'distance', 30);

Опция: grid

Опция создаёт щелчок по подручному элементу при перемещении, через каждые x и y пикселей. Значения массива: [x, y]

"По умолчанию установлено"false

Инициализировать перетаскивание с определенной опцией grid.

$('.selector').draggable({ grid: [50, 20] });

Получить или установить опцию grid после инициализации.

//получить опцию
var grid = $('.selector').draggable('option', 'grid');
//установить опцию
$('.selector').draggable('option', 'grid', [50, 20]);

Опция: handle

Если определено, то начало перетаскивания ограничинавется нажатием по опредленному элементу(ам).

"По умолчанию установлено"false

Инициализировать перетаскивание с определенной опцией handle.

$('.selector').draggable({ handle: 'h2' });

Получить или установить опцию handle после инициализации.

//получить опцию
var handle = $('.selector').draggable('option', 'handle');
//установить опцию
$('.selector').draggable('option', 'handle', 'h2');

Опция: helper

Опция позволяет использовать подручный элемент для отображения перетаскивания. Доступные значения: 'original', 'clone', функция. Если указана функция, она должна возвращать DOMElement.

"По умолчанию установлено"original

Инициализировать перемещение с заданной опцией helper.

$('.selector').draggable({ helper: 'clone' });

Получить или установить опцию helper после инициализации.

//получить опцию
var helper = $('.selector').draggable('option', 'helper');
//установить опцию
$('.selector').draggable('option', 'helper', 'clone');

Опция: iframeFix

Предотвращает захват элементов iframe с помощью события mousemove в течение перемещения. Полезно в комбинации с использованием опции cursorAt, или в иных случаях, если икурсор мыши находится не над поверхностью подручного элемента. Если установлено true, то будет добавлен прозрачный слой ко всем элементм iframe на странице. Если определён селектор элемента,то подходящие данному селектору элементы iframe будут скрыты под данным слоем.

"По умолчанию установлено"false

Инициализировать перемещение с заданной опцией helper iframeFix.

$('.selector').draggable({ iframeFix: true });

Получить или установить опцию iframeFix после инициализации.

//получить опцию
var iframeFix = $('.selector').draggable('option', 'iframeFix');
//установить опцию
$('.selector').draggable('option', 'iframeFix', true);

Опция:

Опция устанавливает прозрачность подручного элемента в момент перемещения.

"По умолчанию установлено"false

Инициализировать перемещение с заданной опцией opacity.

$('.selector').draggable({ refreshPositions: true });

Получить или установить опцию opacity после инициализации.

//получить опцию
var refreshPositions = $('.selector').draggable('option', 'refreshPositions');
//установить опцию
$('.selector').draggable('option', 'refreshPositions', true);

Опция: refreshPositions

Если установлено true, то то все значения перемещаемых позиций подсчитываются по каждому событию mousemove. Предупреждение: данное решение эффективно для высоко динамичных страниц, но сущетсвенно снижает производительность.

"По умолчанию установлено"false

Инициализировать перемещение с заданной опцией refreshPositions.

$('.selector').draggable({ refreshPositions: true });

Получить или установить опцию refreshPositions после инициализации.

//получить опцию
var refreshPositions = $('.selector').draggable('option', 'refreshPositions');
//установить опцию
$('.selector').draggable('option', 'refreshPositions', true);

Опция: revert

Если установлено true, то элемент будет возвращен к его первоначальной позиции на странице, когда перетаскивание будет закончено. Доступные значения: 'valid', 'invalid'. Если установлено invalid, возврат случиться если перемещаемый объект не был помещен в другой объект. Для valid, в любом случае произойдёт возврат.

"По умолчанию установлено"false

Инициализировать перетаскивание с заданной опцией revert.

$('.selector').draggable({ revert: true });

Установить или получить опцию revert после запуска.

//получить опцию
var revert = $('.selector').draggable('option', 'revert');
//установить опцию
$('.selector').draggable('option', 'revert', true);

Опция: revertDuration

Продолжительность анимации возврата элемента в миллисекундах. Опция игнорируется если revert установлен как false.

"По умолчанию установлено"500

Инициализировать перетаскивание с опцией revertDuration.

$('.selector').draggable({ revertDuration: 1000 });

Установить или получить опцию revertDuration после запуска.

//получить опцию
var revertDuration = $('.selector').draggable('option', 'revertDuration');
//установить опцию
$('.selector').draggable('option', 'revertDuration', 1000);

Опция: scope

Используется для группировки набора перетаскиваемых элементов и элементов, в которые происходит помещение других элементов, в дополнение к опции accept функции droppable. Перетаскиваемый элемент с тем же значением границы, что и значение границы элемента, в который помещается перетаскиваемый элемент, будет помещен в элемент, который для этоого предназначен.

"По умолчанию установлено"default

Инициализировать перемещение с опцией scope.

$('.selector').draggable({ scope: 'tasks' });

Установить или получить опцию scope, после запуска.

//получить опцию
var scope = $('.selector').draggable('option', 'scope');
//установить опцию
$('.selector').draggable('option', 'scope', 'tasks');

Опция: scroll

Если установлено true, то скроллинг контейнера автоматически перемещается вместе с перемещением элемента.

"По умолчанию установлено"true

Инициализировать перемещение с заданной опцией scroll.

$('.selector').draggable({ scroll: false });

Установить или получить опцию scroll после запуска.

//получить опцию
var scroll = $('.selector').draggable('option', 'scroll');
//установить опцию
$('.selector').draggable('option', 'scroll', false);

Опция: scrollSensitivity

Расстояние в пикселях от края окна, после которого должен появиться скроллинг. Расстояние относительно указателя мыши, не перемещения элемента.

"По умолчанию установлено"20

Инициализировать перемещение с опцией scrollSensitivity.

$('.selector').draggable({ scrollSensitivity: 40 });

Получить или установить опцию scrollSensitivity, после запуска.

//получить опцию
var scrollSensitivity = $('.selector').draggable('option', 'scrollSensitivity');
//установить опцию
$('.selector').draggable('option', 'scrollSensitivity', 40);

Опция: scrollSpeed

Скорость, с которой должен перемещаться скроллинг окна, когда указатель мыши установлен с опцией scrollSensitivity.

"По умолчанию установлено"20

Инициализировать перемещение с опцией scrollSpeed.

$('.selector').draggable({ scrollSpeed: 40 });

Получить или установить опцию scrollSpeed, после запуска.

//получить опцию
var scrollSpeed = $('.selector').draggable('option', 'scrollSpeed');
//установить опцию
$('.selector').draggable('option', 'scrollSpeed', 40);

Опция: snap

Если указан селектор или true (эквивалентно '.ui-draggable'), перемещаемый элемент будет скреплён с краем подходящего элемента, когда край элемента находится рядом.

"По умолчанию установлено"false

Инициализировать перемещение с опцией snap.

$('.selector').draggable({ snap: true });

Получить или установить опцию snap, после запуска.

//получить опцию
var snap = $('.selector').draggable('option', 'snap');
//установить опцию
$('.selector').draggable('option', 'snap', true);

Опция: snapMode

Определяет какие края скрепляемых элементов при перемещении будет скреплены. Игнорирует, если опция snap установлена как false. Доступные значения: 'inner', 'outer', 'both'.

"По умолчанию установлено"20

Инициализировать перемещение с опцией snapMode.

$('.selector').draggable({ snapMode: 'outer' });

Получить или установить опцию snapMode, после запуска.

//получить опцию
var snapMode = $('.selector').draggable('option', 'snapMode');
//установить опцию
$('.selector').draggable('option', 'snapMode', 'outer');

Опция: snapTolerance

Расстояние в пикселях от краёв скрепляемого элемента, на которого произойдёт скрепление. Игнорирует, если опция snap установлена как false.

"По умолчанию установлено"20

Запустить перемещение с опцией napTolerance.

$('.selector').draggable({ snapTolerance: 40 });

Получить или установить опцию napTolerance, после запуска.

//getter
var snapTolerance = $('.selector').draggable('option', 'snapTolerance');
//setter
$('.selector').draggable('option', 'snapTolerance', 40);

Опция: stack

Автоматический элемент управления свойством z-Index определенной группы элементов (ключ 'group' в хэше, предоставляет доступ к jQuery селектору ) всегда переносящий на передний план перемещаемые элементы. Очень полезная опция для управления элементами окна. Необязательным является ключ 'min', при его установке zIndex не может быть ниже его значения.

"По умолчанию установлено"false

Запустить перемещение с опцией stack.

$('.selector').draggable({ stack: { group: 'products', min: 50 } });

Получить или установить опцию stack, после запуска.

//getter
var stack = $('.selector').draggable('option', 'stack');
//setter
$('.selector').draggable('option', 'stack', { group: 'products', min: 50 });

Опция: zIndex

Опция устанавливает свойство z-index для подручного элемента, в момент перемещения.

"По умолчанию установлено"false

Запустить перемещение с опцией zIndex.

$('.selector').draggable({ zIndex: 2700 });

Получить или установить опцию zIndex, после запуска.

//getter
var zIndex = $('.selector').draggable('option', 'zIndex');
//setter
$('.selector').draggable('option', 'zIndex', 2700);

События

Событие: start

Данное событие запускается, когда начинается перемещение.

Установить функцию callback для обработки события start как инициализирующую опцию.

$('.selector').draggable({
   start: function(event, ui) { ... }
});

Связать событие start с типом: dragstart.

$('.selector').bind('dragstart', function(event, ui) {
  ...
});

Событие: drag

Данное событие запускается, когда курсор движется в течение перемещения элемента.

Установить функцию callback в качестве обработчика события drag как инициализирующую опцию.

$('.selector').draggable({
   drag: function(event, ui) { ... }
});

Связать событие drag с типом: drag.

$('.selector').bind('drag', function(event, ui) {
  ...
});

Событие: dragstop

Данное событие запускается, когда перемещение заканчивается.

Установить функцию callback в качестве обработчика события stop как инициализирующую опцию.

$('.selector').draggable({
   stop: function(event, ui) { ... }
});

Связать событие stop с типом: dragstop.

$('.selector').bind('dragstop', function(event, ui) {
  ...
});

Методы

Метод: destroy

.draggable('destroy')

Полностью удалить функциональность draggable. Метод возвращает элемент обратно к его предшествующему состоянию.

Метод: disable

.draggable('disable')

Отключить draggable.

Метод: enable

.draggable('enable')

Включить draggable.

Метод: option

.draggable('option', optionName,[value])

Установить или получить опцию draggable. Если нет заданной переменной, метод предоставляет значение опции.

Тема:

Используемая тема jQuery UI

jQuery UI Draggable плагин использует jQuery UI CSS структуру для придания стиля, включающиую цвета и фоновые текстуры. Мы рекомендуем использовать инструмент ThemeRoller для создания и загрузки тем, которые легко встраиваются и поддерживаются. Если нуждается более гдубокий уровень настройки, сущетсвует особый виджет классов ссылающийся на ui.draggable.css лист стилей который может быть модифицирован. Данный класс подчеркнут жирным ниже.

Образец разметки jQuery UI CSS струтктуры классов

<div class="ui-draggable"></div>

Учтите: Данный образец разметки сгенерирован через плагин draggable,это не разметка, которую вы можете использовать для создания перемещения. Для этого единственно необходима следующая разметка <div></div>.

Примеры

Добавлено1.2

Версия jQuery 1.3.2 Документ создан 2009-02-21T00:32:39Z

Ошибки и опечатки
Предложения и жалобы
Поддержка сайта

Александр Ермаков. Хостинг - www.pwstudio.org

Руководство jQuery 1.4.2

Плагины jQuery UI

Эффекты