Перетаскиваемые элементы

Draggable


Описание
Свойства
Методы
События

Плагин Draggable позволяет сделать элементы страницы перемещаемыми с помощью мыши. Эти элементы автоматически получают класс ui-draggable, а в момент перемещения еще и ui-draggable-dragging.

Перетаскиваемые элементы генерируют три новых типа событий: start, drag, и stop. Они происходят в момент захвата, при перемещении и в момент отпускания перемещаемого элемента. Обработчики этих событий будут получать 2 параметра: стандартный объект события от браузера и дополнительный объект (назовем его ui) со следующими полями:

ui.helper — вспомогательный элемент (helper) в форме объекта jQuery. Подробности об этом элементе можно узнать в описании свойства helper.
ui.position — позиция перемещаемого элемента относительно ближайшего родителя c заданным типом позиционирования (css-свойство position равно relative или absolute или fixed).
ui.offset — позиция перемещаемого элемента относительно начала документа.

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

или свойство offset, которое можно получить напрямую у перемещаемого объекта:


↓ Имя свойства :типы значений (значение по умолчанию)
disabled:boolean(false)
Останавливает\возобновляет возможность перетаскивать элементы страницы.
// ------- Работа со свойством disabled---------
// в момент установки draggable на элемент
$(".selector").draggable({ disabled: true });
 
//получение значения disabled 
var disabled = $(".selector").draggable( "option", "disabled" );
//изменение значения disabled
$(".selector").draggable( "option", "disabled", true );
addClasses:boolean(true)
Задав это свойство со значением false, вы отмените автоматическую установку класса "ui-draggable" на перетаскиваемые элементы. Это может быть оптимизационной мерой, в случае, если необходимо сделать перетаскиваемыми сразу несколько сотен элементов или даже более.
// ------- Работа со свойством addClasses ---------
// в момент установки draggable на элемент
$(".selector").draggable({ addClasses: false });
 
//получение значения addClasses
var addClasses = $(".selector").draggable( "option", "addClasses" );
//изменение значения addClasses
$(".selector").draggable( "option", "addClasses", true );
appendTo:element,селектор('parent')
Этот параметр определяет в какой элемент страницы будет помещен вспомогательный элемент (helper, см. одноименное свойство). По умолчанию, он помещается туда же, где находится сам перемещаемый элемент. appendTo может быть задан DOM-элементом или селектором, по которому будет осуществлен поиск элемента.
// ------- Работа со свойством appendTo ---------
// в момент установки draggable на элемент
$(".selector").draggable({ appendTo: "#someId" });
 
//получение значения appendTo
var el = $(".selector").draggable( "option", "appendTo" );
//изменение значения appendTo
$(".selector").draggable( "option", "appendTo", "#someId" );
axis:string,false(false)
Этот параметр определяет в каком направлении можно будет перемещать элемент. Возможные значения 'x', 'y' и false (только по вертикали, только по горизонтали или в любом).
// ------- Работа со свойством axis ---------
// в момент установки draggable на элемент
$(".selector").draggable({ axis: "x" });
 
//получение значения axis
var axis = $(".selector").draggable( "option", "axis" );
//изменение значения axis
$(".selector").draggable( "option", "axis", "y" );
cancel:селектор('input,option')
Параметр cancel определяет, за какие элементы нельзя "браться" для перемещения исходного элемента.
// ------- Работа со свойством cancel ---------
// в момент установки draggable на элемент
$(".selector").draggable({ cancel: "button" });
 
//получение значения cancel
var cancel = $(".selector").draggable( "option", "cancel" );
//изменение значения cancel
$(".selector").draggable( "option", "cancel", "button" );
connectToSortable:селектор,false(false)
Определяет, может ли draggable-элемент быть добавлен к набору sortable-элементов (см. плагин sortable). Параметр может принимать либо значение false, либо строку с селектором, определяющим группу sortable-элементов. Для корректной работы скрипта, у draggable-элемента желательно задать вспомогательный элемент helper:"clone" (см. свойство helper).
// ------- Работа со свойством connectToSortable ---------
// в момент установки draggable на элемент
$(".selector").draggable({ connectToSortable:"ul#myList" });
 
//получение значения connectToSortable
var connectToSortable = $(".selector").draggable( "option", "connectToSortable" );
//изменение значения connectToSortable
$(".selector").draggable( "option", "connectToSortable", "ul#myList" );
Параметр containment определяет ограничения на перемещение элемента при перетаскивании. По умолчанию их нет, но они могут быть заданы областью какого-либо элемента (например с помощью селекторов 'parent', 'document', 'window' и др.) и кроме этого можно задать ограничения прямоугольником с координатами [x1, y1, x2, y2].
// ------- Работа со свойством containment---------
// в момент установки draggable на элемент
$(".selector").draggable({ containment:"parent" });
 
//получение значения containment
var containment = $(".selector").draggable( "option", "containment" );
//изменение значения containment
$(".selector").draggable( "option", "containment", "parent" );
cursor:string('auto')
Определяет значение css-свойства cursor (вид курсора).
// ------- Работа со свойством cursor---------
// в момент установки draggable на элемент
$(".selector").draggable({ cursor:"pointer" });
 
//получение значения cursor
var cursor = $(".selector").draggable( "option", "cursor" );
//изменение значения cursor
$(".selector").draggable( "option", "cursor", "pointer" );
cursorAt:object(false)
С помощью этого свойства можно задать координаты на перемещаемом элементе, в которых окажется курсор при его перетаскивании (см. выше пример "Расположение курсора").
// ------- Работа со свойством cursorAt ---------
// в момент установки draggable на элемент
$(".selector").draggable({ cursorAt:{left:5, top:5} });
 
//получение значения cursorAt
var cursorAt = $(".selector").draggable( "option", "cursorAt" );
//изменение значения cursorAt
$(".selector").draggable( "option", "cursorAt", {right:5, bottom:5} );
delay:integer(0)
Параметр delay определяет задержку (в миллисекундах) перед началом перемещения элемента. Это может быть защитой от нежелательного перетаскивания элемента, если пользователь случайно потянет элемент.
// ------- Работа со свойством delay ---------
// в момент установки draggable на элемент
$(".selector").draggable({ delay:500 });
 
//получение значения delay
var delay = $(".selector").draggable( "option", "delay" );
//изменение значения delay
$(".selector").draggable( "option", "delay", 500 );
distance:integer(1)
Этот параметр определяет расстояние (в пикселях), на которое нужно потянуть элемент, что бы он "оторвался" от своего первоначального положения. Это может быть защитой от нежелательного перетаскивания элемента, если пользователь случайно потянет элемент.
// ------- Работа со свойством distance ---------
// в момент установки draggable на элемент
$(".selector").draggable({ distance:15 });
 
//получение значения distance
var distance = $(".selector").draggable( "option", "distance" );
//изменение значения distance
$(".selector").draggable( "option", "distance", 15 );
grid:array,false(false)
С помощью grid можно задать в пикселях размер шага перемещения элемента (горизонтального и вертикального отдельно). См. выше пример "Магнитные края".
// ------- Работа со свойством grid ---------
// в момент установки draggable на элемент
$(".selector").draggable({ grid:[10,10] });
 
//получение значения grid
var grid = $(".selector").draggable( "option", "grid" );
//изменение значения grid
$(".selector").draggable( "option", "grid", [10,10] );
Позволяет указать, какие элементы, находящиеся внутри draggable-элемента, можно "схватить" для перетаскивания последнего. Параметр может быть задан с помощью DOM-элемента или селектора, по которому его можно найти. См. выше пример "Области захвата".
// ------- Работа со свойством handle ---------
// в момент установки draggable на элемент
$(".selector").draggable({ handle:'h2' });
 
//получение значения handle
var handle = $(".selector").draggable( "option", "handle" );
//изменение значения handle
$(".selector").draggable( "option", "handle", 'h2' );
helper:string,function('original')
Определяет, какой элемент будет перемещаться на самом деле: сам элемент (значение 'original'), его клон (значение 'clone') или какой то другой элемент (в этом случае, параметру helper необходимо присвоить функцию, которая бы возвращала нужный DOM-элемент).
// ------- Работа со свойством helper ---------
// в момент установки draggable на элемент
$(".selector").draggable({ helper:'clone' });
 
//получение значения helper
var helper = $(".selector").draggable( "option", "helper" );
//изменение значения helper
$(".selector").draggable( "option", "helper", 'clone' );
Предотвращает возникновение события mousemove над элементами iframe в момент перетаскивания. Задав true в качестве значения свойства iframeFix, вы обеспечите невидимое перекрытие для всех iframe-ов. Если же задать селектор, то перекрыты будут только те iframe-ы, которые ему удовлетворяют.
// ------- Работа со свойством iframeFix ---------
// в момент установки draggable на элемент
$(".selector").draggable({ iframeFix:true });
 
//получение значения iframeFix
var iframeFix = $(".selector").draggable( "option", "iframeFix" );
//изменение значения iframeFix
$(".selector").draggable( "option", "iframeFix", true );
opacity:float,false(false)
Параметр opacity отвечает за уровень прозрачности элемента в момент его перемещения. Напомним, что он принимает значения от 0 до 1 (от полной прозрачности, до полной видимости).
// ------- Работа со свойством opacity ---------
// в момент установки draggable на элемент
$(".selector").draggable({ opacity:0.5 });
 
//получение значения opacity
var opacity = $(".selector").draggable( "option", "opacity" );
//изменение значения opacity
$(".selector").draggable( "option", "opacity", 0.5 );
refreshPositions:boolean(false)
При использовании совместно с плагином Droppable, результат перетаскивания считается только при отпускании элемента. Если вам необходимо подсчитывать Droppable-результат при каждом движении перемещаемого элемента, установите refreshPositions в true. Однако, не стоит забывать, что это увеличивает нагрузку на процессор.
// ------- Работа со свойством refreshPositions ---------
// в момент установки draggable на элемент
$(".selector").draggable({ refreshPositions:true });
 
//получение значения refreshPositions
var refreshPositions = $(".selector").draggable( "option", "refreshPositions" );
//изменение значения refreshPositions
$(".selector").draggable( "option", "refreshPositions", true );
revert:boolean,string(false)
Если присвоить этому свойству значение true, то при отпускании перетаскиваемого элемента, он вернется на исходную позицию. Кроме этого, доступны два строковых варианта этого свойства: 'valid' и 'invalid', которые имеют смысл при использовании плагина Droppable. В случае 'invalid' перетаскиваемый элемент будет возвращен на прежнюю позицию, если он был "сброшен" не на Droppable-элемент. При 'invalid', наоборот — элемент будет возвращен в исходную позицию, только если был сброшен на Droppable-элемент.
// ------- Работа со свойством revert ---------
// в момент установки draggable на элемент
$(".selector").draggable({ revert:true });
 
//получение значения revert
var revert = $(".selector").draggable( "option", "revert" );
//изменение значения revert
$(".selector").draggable( "option", "revert", true );
revertDuration:integer(500)
Продолжительность (в миллисекундах) автоматического возвращения элемента на прежнюю позицию, при включенном параметре revert.
// ------- Работа со свойством revertDuration ---------
// в момент установки draggable на элемент
$(".selector").draggable({ revertDuration:100 });
 
//получение значения revertDuration
var revertDuration = $(".selector").draggable( "option", "revertDuration" );
//изменение значения revertDuration
$(".selector").draggable( "option", "revertDuration", 100 );
scope:string("default")
draggable и droppable элементы обладают параметром scope. Все draggable-элементы могут быть «скинуты» на droppable-элементы при совпадении значения этого параметра. Элементы с различными scope не могут так взаимодействовать. Кроме scope, droppable-элементы могут ограничивать взаимодействие с перетаскиваемыми элементами посредством параметра accept (см. droppable).
// ------- Работа со свойством scope ---------
// в момент установки draggable на элемент
$(".selector").draggable({ scope:"tasks" });
 
//получение значения scope
var scope = $(".selector").draggable( "option", "scope" );
//изменение значения scope
$(".selector").draggable( "option", "scope", "tasks" );
scroll:boolean(false)
Присвоив этому параметру значение true, вы включите автоскроллинг. В этом случае, при попытке перетащить элемент за пределы ближайшего скроллируемого родителя, последний начнет прокручиваться автоматически. Смотри так же параметры scrollSensitivity и scrollSpeed.
// ------- Работа со свойством scroll ---------
// в момент установки draggable на элемент
$(".selector").draggable({ scroll:true });
 
//получение значения scroll
var scroll = $(".selector").draggable( "option", "scroll" );
//изменение значения scroll
$(".selector").draggable( "option", "scroll", true );
scrollSensitivity:integer(20)
Определяет расстояние (в пикселях) на котором должен находиться перетаскиваемый элемент от границы его ближайшего скроллируемого предка, для включения автоскроллинг (см. свойство scroll).
// ------- Работа со свойством scrollSensitivity ---------
// в момент установки draggable на элемент
$(".selector").draggable({ scrollSensitivity:100 });
 
//получение значения scrollSensitivity
var scrollSensitivity = $(".selector").draggable( "option", "scrollSensitivity" );
//изменение значения scrollSensitivity
$(".selector").draggable( "option", "scrollSensitivity", 100 );
scrollSpeed:integer(20)
Определяет скорость выполнения автоскроллинга (см. свойство scroll).
// ------- Работа со свойством scrollSpeed ---------
// в момент установки draggable на элемент
$(".selector").draggable({ scrollSpeed:40 });
 
//получение значения scrollSpeed
var scrollSpeed = $(".selector").draggable( "option", "scrollSpeed" );
//изменение значения scrollSpeed
$(".selector").draggable( "option", "scrollSpeed", 40 );
Перетаскиваемые элементы можно научить "примагничиваться" к краям других элементов (см. выше пример "Магнитные края"). Для этого нужно задать свойство snap со значением true, при котором друг к другу примагничиваться будут перетаскиваемые элементы. Кроме этого, параметру snap можно присвоить селектор и тогда, перемещаемый элемент будет магнититься только к элементам, которые ему соответствуют. Свойства snapMode и snapTolerance помогут настроить параметры примагничивания.
// ------- Работа со свойством snap ---------
// в момент установки draggable на элемент
$(".selector").draggable({ snap:true });
 
//получение значения snap
var snap = $(".selector").draggable( "option", "snap" );
//изменение значения snap
$(".selector").draggable( "option", "snap", true );
snapMode:string('both')
Свойство snapMode определяет режим примагничивания перетаскиваемого элемента (см. свойство snap). Возможные значения: 'inner', 'outer', 'both'. Они означают, что перетаскиваемые элементы будут магнититься только ко внутренним, только ко внешним или к обеим сторонам выбранных в свойстве snap элементам.
// ------- Работа со свойством snapMode ---------
// в момент установки draggable на элемент
$(".selector").draggable({ snapMode:'outer' });
 
//получение значения snapMode
var snapMode = $(".selector").draggable( "option", "snapMode" );
//изменение значения snapMode
$(".selector").draggable( "option", "snapMode", 'outer' );
snapTolerance:integer(20)
snapTolerance определяет расстояние (в пикселях), находясь на котором начинает действовать примагничивание (см. свойство snap).
// ------- Работа со свойством snapTolerance ---------
// в момент установки draggable на элемент
$(".selector").draggable({ snapTolerance:50 });
 
//получение значения snapTolerance
var snapTolerance = $(".selector").draggable( "option", "snapTolerance" );
//изменение значения snapTolerance
$(".selector").draggable( "option", "snapTolerance", 50 );
Перетаскиваемые элементы, найденные с помощью заданного в stack селектора, при старте перемещения будут автоматически получать наибольший z-index (см. выше пример "Авто z-index").
// ------- Работа со свойством stack ---------
// в момент установки draggable на элемент
$(".selector").draggable({ stack:".draggable" });
 
//получение значения stack
var stack = $(".selector").draggable( "option", "stack" );
//изменение значения stack
$(".selector").draggable( "option", "stack", ".draggable" );
zIndex:integer,false(false)
С помощью этого параметра можно управлять css-свойством z-index перетаскиваемого элемента.
// ------- Работа со свойством zIndex ---------
// в момент установки draggable на элемент
$(".selector").draggable({ zIndex:5 });
 
//получение значения zIndex
var zIndex = $(".selector").draggable( "option", "zIndex" );
//изменение значения zIndex
$(".selector").draggable( "option", "zIndex", 5 );

↓ Способ вызова
.draggable("destroy") 
Удаляет всю функциональность плагина draggable с выбранных элементов.
.draggable("disable") 
Останавливает работу плагина draggable на выбранных элементах. Для возобновления, необходимо воспользоваться методом .draggable("enable").
.draggable("enable") 
Возобновляет работу плагина draggable на выбранных элементах (например, после того, как она была остановлена с помощью .draggable("disable")).
.draggable("option", optionName, [value]) 
Этот метод позволяет изменять/получать свойства плагина draggable. Если необходимо изменить сразу несколько свойств, воспользуйтесь следующей формой этой функции — .draggable("option", options), где options это объект в формате {optionName1:value1, optionName2:value2, ...}.
.draggable("widget") 
Возвращает те из выбранных элементов, которые являются перетаскиваемыми.

↓ Внутреннее имя события :внешнее имя
create:dragcreate
Событие create происходит в момент инициализации draggable на элементе.
// обработка события create
$(".selector").draggable({
   create: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$(".selector").bind( "dragcreate", function(event, ui){ ... });
start:dragstart
Событие start происходит в момент начала перетаскивания элемента.
// обработка события start
$(".selector").draggable({
   start: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$(".selector").bind( "dragstart", function(event, ui){ ... });
drag:drag
Событие drag при каждом движении перетаскиваемого элемента.
// обработка события drag
$(".selector").draggable({
   drag: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$(".selector").bind( "drag", function(event, ui){ ... });
stop:dragstop
Событие start происходит в момент отпускания перетаскиваемого элемента.
// обработка события stop
$(".selector").draggable({
   stop: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$(".selector").bind( "dragstop", function(event, ui){ ... });