Ловящие элементы

Droppable


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

Плагин Droppable позволяет обрабатывать сброс перетаскиваемых (draggable) элементов в области выбранных элементов. Можно задавать какие из draggable-элементов могут быть «пойманы», а какие нет.

Droppable-элементы генерируют несколько новых типов событий (см. пункт "События"). Обработчики этих событий будут получать 2 параметра: стандартный объект события от браузера и дополнительный объект (назовем его ui) со следующими полями:

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

↓ Имя свойства :типы значений (значение по умолчанию)
disabled:boolean(false)
Останавливает\возобновляет возможность ловить перетаскиваемые элементы страницы.
// ------- Работа со свойством disabled ---------
// в момент установки droppable на элемент
$("selector").droppable({ disabled: true });
 
//получение значения disabled 
var disabled = $("selector").droppable( "option", "disabled" );
//изменение значения disabled
$("selector").droppable( "option", "disabled", true );
Определяет, какие элементы сможет ловить droppable-элемент (по умолчанию любые). Можно задать в качестве этого параметра функцию. В этом случае, функция будет вызываться для каждого перетаскиваемого элемента по отдельности (они будут передаваться в функцию первым параметром) и в случае возвращения значения true, переданный элемент сможет быть пойман droppable-элементом.
// ------- Работа со свойством accept ---------
// в момент установки droppable на элемент
$("selector").droppable({ accept:function(el){return el.hasClass("someClass")} });
 
//получение значения accept
var accept = $("selector").droppable( "option", "accept" );
//изменение значения accept
$("selector").droppable( "option", "accept", ".someClass" );
activeClass:string,false(false)
Это свойство содержит имя класса, который будет присвоен droppable-элементу в момент перемещения подходящего перетаскиваемого элемента (см. выше пример "Дополнительные реакции").
// ------- Работа со свойством activeClass ---------
// в момент установки droppable на элемент
$("selector").droppable({ activeClass:"someClass" });
 
//получение значения activeClass
var activeClass = $("selector").droppable( "option", "activeClass" );
//изменение значения activeClass
$("selector").droppable( "option", "activeClass", "someClass" );
activeClass:string,false(false)
Это свойство содержит имя класса, который будет присвоен droppable-элементу при перемещении подходящего перетаскиваемого элемента (см. выше пример "Дополнительные реакции").
// ------- Работа со свойством activeClass ---------
// в момент установки droppable на элемент
$("selector").droppable({ activeClass:"someClass" });
 
//получение значения activeClass
var activeClass = $("selector").droppable( "option", "activeClass" );
//изменение значения activeClass
$("selector").droppable( "option", "activeClass", "someClass" );
greedy:boolean(false)
При значении true, отключается передача событий плагина droppable вверх по иерархии (см. выше пример "Запрет делегирования").
// ------- Работа со свойством greedy ---------
// в момент установки droppable на элемент
$("selector").droppable({ greedy:true });
 
//получение значения greedy
var greedy = $("selector").droppable( "option", "greedy" );
//изменение значения greedy
$("selector").droppable( "option", "greedy", true );
hoverClass:string,false(false)
Это свойство содержит имя класса, который будет присвоен droppable-элементу при нахождении подходящего перетаскиваемого элемента (см. выше пример "Дополнительные реакции").
// ------- Работа со свойством hoverClass ---------
// в момент установки droppable на элемент
$("selector").droppable({ hoverClass:"someClass" });
 
//получение значения hoverClass
var activeClass = $("selector").droppable( "option", "hoverClass" );
//изменение значения hoverClass
$("selector").droppable( "option", "hoverClass", "someClass" );
scope:string("default")
draggable и droppable элементы обладают параметром scope. Все draggable-элементы могут быть «пойманы» droppable-элементами при совпадении значения этого параметра. Элементы с различными scope не могут так взаимодействовать. Кроме scope, droppable-элементы могут ограничивать взаимодействие с перетаскиваемыми элементами посредством параметра accept.
// ------- Работа со свойством scope ---------
// в момент установки droppable на элемент
$("selector").droppable({ scope:"tasks" });
 
//получение значения scope
var scope = $("selector").droppable( "option", "scope" );
//изменение значения scope
$("selector").droppable( "option", "scope", "tasks" );
tolerance:string("intersect")
С помощью этого свойства можно настроить режим определения находится ли перетаскиваемый элемент над ловящим. Возможные значения:
fit — перетаскиваемый элемент считается находящимся над ловящим элементом, если полностью находится внутри последнего.
intersect — ..., если перетаскиваемый элемент лежит внутри ловящего хотя бы наполовину.
pointer — ..., если курсор находится в области ловящего элемента.
touch — ..., если перетаскиваемый элемент хоты бы на один пиксель лежит над ловящим элементом.
// ------- Работа со свойством tolerance ---------
// в момент установки droppable на элемент
$("selector").droppable({ tolerance:"fit" });
 
//получение значения tolerance
var tolerance = $("selector").droppable( "option", "tolerance" );
//изменение значения tolerance
$("selector").droppable( "option", "tolerance", "fit" );

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

↓ Внутреннее имя события :внешнее имя
create:dropcreate
Событие create происходит в момент инициализации droppable на элементе.
// обработка события create
$("selector").droppable({
   create: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "dropcreate", function(event, ui){ ... });
activate:dropactivate
Событие activate происходит при старте перемещения draggable-элемента, который может быть сброшен на текущий droppable-элемент.
// обработка события activate
$("selector").droppable({
   activate: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "dropactivate", function(event, ui){ ... });
deactivate:dropdeactivate
Событие deactivate происходит при завершении перетаскивания draggable-элемента, который мог бы быть пойман текущим droppable-элементом.
// обработка события deactivate
$("selector").droppable({
   deactivate: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "dropdeactivate", function(event, ui){ ... });
over:dropover
Событие over происходит при попадании draggable-элемента в область текущего droppable-элемента (при условии, что данный перетаскиваемый элемент может быть пойман droppable-элементом).
// обработка события over
$("selector").droppable({
   over: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "dropover", function(event, ui){ ... });
out:dropout
Событие over происходит, когда draggable-элемент покидает область текущего droppable-элемента (при условии, что данный перетаскиваемый элемент может быть пойман droppable-элементом).
// обработка события out
$("selector").droppable({
   out: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "dropout", function(event, ui){ ... });
drop:drop
Событие drop происходит, когда draggable-элемент отпускают над областью текущего droppable-элемента (при условии, что данный перетаскиваемый элемент может быть пойман droppable-элементом).
// обработка события drop
$("selector").droppable({
   drop: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "drop", function(event, ui){ ... });