[Function] draggable(options)
Создать эффект перетаскиваемости узла, полученный из jquery.
Создать эффект перетаскиваемости узла, полученный из 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="http://test-drupal.ru/themes/slyweb/css/jquery-ui-1.7.2.custom.css"
rel="stylesheet" type="text/css"/>
<script src="http://test-drupal.ru/themes/slyweb/js/jquery-1.3.2.min.js"></script>
<script src="http://test-drupal.ru/themes/slyweb/js/jquery-ui-1.7.2.custom.min.js"></script>
<script>
$(document).ready(function(){
$(function() {
$("#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