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

Пример

$(document).ready(function() {

$("#tabs").tabs();
//Код первой вкладки (стандартное использование)
   $("#drag1").draggable();
//Код второй вкладки (события)
   var x=0,y=0,z=0;
   $("#drag2").draggable({
   start:function(){
      ++x;
      $("#start").html(x);
   },
   stop:function(){
      ++y;
      $("#stop").html(y);},
   drag:function(){
      ++z;
      $("#drag").html(z);}
   });
//Код третьей вкладки (ограничения)
   $("#drag3").draggable({axis:'x'});
   $("#drag4").draggable({axis:'y'});
   $("#drag5").draggable({containment:'parent'});
....
});

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

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

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

Перетаскиваемому элементу автоматически назначается класс .ui-draggable. Непосредственно во время перетаскивания ему также дополнительно назначается класс .ui-draggable-dragging.

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

Часто перетаскиваемые элементы используются совместно с областями для приема, которые определяются с помощью метода droppable.

Синтаксис

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

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

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

события события связанные с перетаскиваемыми объектами. Все события связанные с перетаскиваемыми объекта рассмотрены в таблице далее.

Опции

Опции	Описание
addClass	Если имеет значение false класс .ui-draggable не будет назначаться элементу (используется для увеличения производительности). Значение по умолчанию: true. Пример использования: .draggable({addClass:false})
appendTo	Указывает элемент, к которому будет привязываться элемент помощник (элемент, который отображается во время перетаскивания). Значение по умолчанию: 'parent'. Пример использования: .draggable({appendTo:'body'})
axis	Позволяет задать ось, по которой можно перетаскивать элемент. Возможные значения: 'x' (элемент можно будет перетаскивать только по горизонтали) и 'y' (элемент можно будет перетаскивать только по вертикали). Значение по умолчанию: false. Пример использования:.draggable({axis:'y'})
cancel	Указывает элемент, нажав на который нельзя перетащить перетаскиваемый объект. Значение по умолчанию: :input,option. Пример использования:.draggable({cancel:'.nodrag'})
connectToSortable	Позволяет связать перетаскиваемый элемент с сортируемым списком. Элемент перетащенный на связанный с ним список станет частью этого списка. Значение по умолчанию: false. Пример использования: .draggable({connectToSortable:'ul#sortlist'})
containment	Ограничивает перетаскивание элемента границами указанного элемента или заданной с помощью координат области. Возможные строковые значения: 'parent', 'window', 'document', [x1,y1,x2,y2]. Значение по умолчанию: false. Пример использования: .draggable({containment:'#wrap1'})
cursor	Позволяет задать вид курсора мыши во время перетаскивания. Значение по умолчанию: auto. Пример использования: .draggable({cursor:'move'})
cursorAt	Задает смещение положения элемента помощника (элемент, который отображается во время перетаскивания объекта) относительно курсора мыши в пикселях. Задается с помощью следующих свойств: left, right, top, bottom (смещение влево, вправо, вверх и вниз). Значение по умолчанию: false. Пример использования: .draggable({cursorAt:{left:5}})
delay	Устанавливает задержку в миллисекундах перед тем, как элемент начнет перетаскиваться (используется для предотвращения перетаскивания при случайном щелчке на элементе). Значение по умолчанию: 0. Пример использования: .draggable({delay:400})
distance	Устанавливает количество пикселей, на которые должен быть перетащен элемент прежде чем он начнет изменять свое местоположения (может использоваться для предотвращения перетаскивания при случайном щелчке на элементе). Значение по умолчанию: 1. Пример использования: .draggable({distance:50})
grid	Устанавливает величину сетки, по которой будет перемещаться элемент помощник во время перетаскивания. С помощью координат x, y Вы можете установить размеры сетки. Значение по умолчанию: false. Пример использования: .draggable({grid:[40,40]})
helper	Устанавливает вид элемента помощника (элемент, который отображается во время перетаскивания). Возможные значения: 'original', 'clone', функция (функция должна возвращать DOM элемент). Значение по умолчанию: 'original'. Пример использования: .draggable({helper:'clone'})
opacity	Устанавливает прозрачность элемента помощника (элемент, который отображается во время перетаскивания). Значение по умолчанию: false. Пример использования: .draggable({opacity:0.55})
revert	Если имеет значение true, то перетаскиваемый элемент будет возвращаться на свою начальную позицию при завершении перетаскивания. При значении invalid элемент будет возвращаться на свою начальную позицию только если он не будет перемещен в соответствующую ему область для приема. Значение по умолчанию: false. Пример использования: .draggable({revert:'invalid'})
revertDuration	Устанавливает количество миллисекунд, в течении которых перетаскиваемый элемент будет возвращаться на свою начальную позицию. Значение по умолчанию: 500. Пример использования: .draggable({revertDuration:1000})
snap	Указывает элемент, к границам которого будет прилипать перетаскиваемый элемент, когда он будет находится поблизости. Значение по умолчанию: false. Пример использования: .draggable({snap:'#testel'})
stack	Контролирует наложение группы выбранных элементов (всегда отображает перетаскиваемый элемент сверху). Значение по умолчанию: false. Пример использования: .draggable({stack:'.group'})

События

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

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

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

Синтаксис

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

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

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

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