Виджет Droppable

Виджет Droppableверсия добавлена: 1.0

Описание: Создание целей для элементов draggable.

Быстрое навигационное менюПримеры

Плагин jQuery UI Droppable делает выбранные элементы droppable (то есть, они принимают элементы draggable). Вы можете указать, какие элементы draggable будут приниматься.

Стилевое оформление

Виджет droppable использует фреймворк CSS jQuery UI CSS, чтобы задать свой внешний вид. Если требуется специфическое стилирование для droppable, можно использовать следующие имена CSS-классов для переопределений или как ключи для classes параметра:

ui-droppable: Элемент droppable. Когда активируется элемент draggable, который может быть помещён на этот droppable, добавляется класс ui-droppable-active. При перетаскивании draggable над этим droppable, добавляется класс ui-droppable-hover.

Зависимости

Параметры

accept

Тип: Селектор или Функция()

Значение по умолчанию: "*"

Определяет, какие элементы draggable принимаются droppable.

Поддерживаются несколько типов:

Селектор: Селектор, указывающий, какие элементы draggable принимаются.
Функция: Функция, которая будет вызвана для каждого draggable на странице (передается в качестве первого аргумента функции). Функция должна вернуть true , если draggable должен быть принят.

Примеры кода:

Инициализируйте droppable с указанным параметром accept.

$( ".selector" ).droppable({
  accept: ".special"
});

Получить или установить параметр accept, после инициализации:

// Getter
var accept = $( ".selector" ).droppable( "option", "accept" );
 
// Setter
$( ".selector" ).droppable( "option", "accept", ".special" );

activeClass

Тип: Строка

Значение по умолчанию: false

Если указано, класс будет добавлен к droppable, когда acceptable draggable перетаскивается.

Параметр activeClass устарел в пользу classes параметра, используя свойство ui-droppable-active.

(версия устарела: 1.12)

Примеры кода:

Инициализируйте droppable с указанным параметром activeClass.

$( ".selector" ).droppable({
  activeClass: "ui-state-highlight"
});

Получить или установить параметр activeClass, после инициализации:

// Getter
var activeClass = $( ".selector" ).droppable( "option", "activeClass" );
 
// Setter
$( ".selector" ).droppable( "option", "activeClass", "ui-state-highlight" );

addClasses

Тип: Булево

Значение по умолчанию: true

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

Примеры кода:

Инициализируйте droppable с указанным параметром addClasses.

$( ".selector" ).droppable({
  addClasses: false
});

Получить или установить параметр addClasses, после инициализации:

// Getter
var addClasses = $( ".selector" ).droppable( "option", "addClasses" );
 
// Setter
$( ".selector" ).droppable( "option", "addClasses", false );

classes

Тип: Объект

Значение по умолчанию: {}

Укажите дополнительные классы, которые нужно добавить к элементам виджета. Любой из классов, указанных в разделе Стилевое оформление, может использоваться в качестве ключей для переопределения их значения. Для получения дополнительной информации об этом параметре, ознакомьтесь со статьей учебного руководства по параметру classes.

Примеры кода:

Инициализируйте droppable с указанным параметром classes, изменив оформление для класса ui-droppable.

$( ".selector" ).droppable({
  classes: {
    "ui-droppable": "highlight"
  }
});

Получить или установить свойство параметра classes, после инициализации, здесь читается и изменяется оформление для класса ui-droppable.

// Getter
var themeClass = $( ".selector" ).droppable( "option", "classes.ui-droppable" );
 
// Setter
$( ".selector" ).droppable( "option", "classes.ui-droppable", "highlight" );

disabled

Тип: Булево

Значение по умолчанию: false

Отключает droppable, если установлено в true.

Примеры кода:

Инициализируйте droppable с указанным параметром disabled.

$( ".selector" ).droppable({
  disabled: true
});

Получить или установить параметр disabled, после инициализации:

// Getter
var disabled = $( ".selector" ).droppable( "option", "disabled" );
 
// Setter
$( ".selector" ).droppable( "option", "disabled", true );

greedy

Тип: Булево

Значение по умолчанию: false

По умолчанию, когда элемент помещается на вложенные droppables, каждый droppable получит элемент. Однако, установив этот параметр в true, родительские droppables не получат элемент. Событие drop всё ещё будет распространяться нормально, но event.target можно проверить, чтобы увидеть, какой droppable получил элемент draggable.

Примеры кода:

Инициализируйте droppable с указанным параметром greedy.

$( ".selector" ).droppable({
  greedy: true
});

Получить или установить параметр greedy после инициализации:

// Getter
var greedy = $( ".selector" ).droppable( "option", "greedy" );
 
// Setter
$( ".selector" ).droppable( "option", "greedy", true );

hoverClass

Тип: Строка

Значение по умолчанию: false

Если указано, класс будет добавлен к droppable, когда acceptable draggable находится над droppable.

Параметр hoverClass устарел в пользу classes параметра, используя свойство ui-droppable-hover.

(версия устарела: 1.12)

Примеры кода:

Инициализируйте droppable с указанным параметром hoverClass.

$( ".selector" ).droppable({
  hoverClass: "drop-hover"
});

Получить или установить параметр hoverClass после инициализации:

// Getter
var hoverClass = $( ".selector" ).droppable( "option", "hoverClass" );
 
// Setter
$( ".selector" ).droppable( "option", "hoverClass", "drop-hover" );

scope

Тип: Строка

Значение по умолчанию: "default"

Используется для группировки наборов элементов draggable и droppable, помимо параметра accept. Draggable с тем же значением scope, что и droppable, будет принят.

Примеры кода:

Инициализируйте droppable с указанным параметром scope.

$( ".selector" ).droppable({
  scope: "tasks"
});

Получить или установить параметр scope после инициализации:

// Getter
var scope = $( ".selector" ).droppable( "option", "scope" );
 
// Setter
$( ".selector" ).droppable( "option", "scope", "tasks" );

tolerance

Тип: Строка

Значение по умолчанию: "intersect"

Указывает режим проверки наложения draggable на droppable. Возможные значения:

"fit": Draggable полностью перекрывает droppable.
"intersect": Draggable перекрывает droppable хотя бы на 50% в обоих направлениях.
"pointer": Указатель мыши перекрывает droppable.
"touch": Draggable перекрывает droppable на любое количество.

Примеры кода:

Инициализируйте droppable с указанным параметром tolerance.

$( ".selector" ).droppable({
  tolerance: "fit"
});

Получить или установить параметр tolerance после инициализации:

// Getter
var tolerance = $( ".selector" ).droppable( "option", "tolerance" );
 
// Setter
$( ".selector" ).droppable( "option", "tolerance", "fit" );

Методы

destroy()Возвращает: jQuery (только плагин)

Полностью удаляет функциональность droppable. Это вернёт элемент в состояние до инициализации.

Этот метод не принимает никаких аргументов.

Примеры кода:

Вызов метода destroy:

$( ".selector" ).droppable( "destroy" );

disable()Возвращает: jQuery (только плагин)

Отключает droppable.

Этот метод не принимает никаких аргументов.

Примеры кода:

Вызов метода disable:

$( ".selector" ).droppable( "disable" );

enable()Возвращает: jQuery (только плагин)

Включает droppable.

Этот метод не принимает никаких аргументов.

Примеры кода:

Вызов метода enable:

$( ".selector" ).droppable( "enable" );

instance()Возвращает: Объект

Возвращает экземпляр объекта droppable. Если у элемента нет связанного экземпляра, undefined возвращается.

В отличие от других методов виджетов, instance() можно безопасно вызывать для любого элемента после загрузки плагина droppable.

Этот метод не принимает никаких аргументов.

Примеры кода:

Вызов метода instance:

$( ".selector" ).droppable( "instance" );

option( optionName )Возвращает: Объект

Получает значение, в настоящее время связанное с указанным optionName.

Примечание: Для опций, имеющих объекты в качестве значения, можно получить значение определённого ключа, используя нотацию точек. Например, "foo.bar" получит значение свойства bar опции foo.

optionName

Тип: Строка

Название опции для получения.

Примеры кода:

Вызов метода:

var isDisabled = $( ".selector" ).droppable( "option", "disabled" );

option()Возвращает: ОбъектPlain

Получает объект, содержащий пары ключ/значение, представляющие текущий хэш опций droppable.

Этот метод не принимает никаких аргументов.

Примеры кода:

Вызов метода:

var options = $( ".selector" ).droppable( "option" );

option( optionName, value )Возвращает: jQuery (только плагин)

Устанавливает значение опции droppable, связанной с указанным optionName.

Примечание: Для опций, имеющих объекты в качестве значения, можно установить значение только одного свойства, используя нотацию точек для optionName. Например, "foo.bar" обновит только свойство bar опции foo.

optionName

Тип: Строка

Имя опции для установки.
value

Тип: Объект

Значение для установки опции.

Примеры кода:

Вызов метода:

$( ".selector" ).droppable( "option", "disabled", true );

option( options )Возвращает: jQuery (только плагин)

Устанавливает одну или несколько опций для droppable.

options

Тип: Объект

Карта пар опция-значение для установки.

Примеры кода:

Вызов метода:

$( ".selector" ).droppable( "option", { disabled: true } );

События

activate( event, ui )Тип: `dropactivate`

Срабатывает, когда перетаскиваемый элемент, который был принят, начинает перемещаться. Это может быть полезно, если вы хотите сделать приемник "подсвеченным", когда на него можно поместить перетаскиваемый элемент.

event

Тип: Event
ui

Тип: Объект
- draggable
  
  Тип: jQuery
  
  Объект jQuery, представляющий перетаскиваемый элемент.
- helper
  
  Тип: jQuery
  
  Объект jQuery, представляющий помощник, который перетаскивается.
- position
  
  Тип: Объект
  
  Текущее положение перетаскиваемого помощника в виде объекта { top, left }.
- offset
  
  Тип: Объект
  
  Текущее смещение положения перетаскиваемого помощника в виде объекта { top, left }.

Примеры кода:

Инициализировать приемник с заданным обратным вызовом activate:

$( ".selector" ).droppable({
  activate: function( event, ui ) {}
});

Связать обработчик событий с событием dropactivate:

$( ".selector" ).on( "dropactivate", function( event, ui ) {} );

create( event, ui )Тип: `dropcreate`

Срабатывает при создании приемника.

event

Тип: Event
ui

Тип: Объект

Примечание: Объект ui пуст, но включен для согласованности с другими событиями.

Примеры кода:

Инициализировать приемник с заданным обратным вызовом create:

$( ".selector" ).droppable({
  create: function( event, ui ) {}
});

Связать обработчик событий с событием dropcreate:

$( ".selector" ).on( "dropcreate", function( event, ui ) {} );

deactivate( event, ui )Тип: `dropdeactivate`

Срабатывает, когда перетаскиваемый элемент, который был принят, перестаёт перемещаться.

event

Тип: Event
ui

Тип: Объект
- draggable
  
  Тип: jQuery
  
  Объект jQuery, представляющий перетаскиваемый элемент.
- helper
  
  Тип: jQuery
  
  Объект jQuery, представляющий помощник, который перетаскивается.
- position
  
  Тип: Объект
  
  Текущее положение перетаскиваемого помощника в виде объекта { top, left }.
- offset
  
  Тип: Объект
  
  Текущее смещение положения перетаскиваемого помощника в виде объекта { top, left }.

Примеры кода:

Инициализировать приемник с заданным обратным вызовом deactivate:

$( ".selector" ).droppable({
  deactivate: function( event, ui ) {}
});

Связать обработчик событий с событием dropdeactivate:

$( ".selector" ).on( "dropdeactivate", function( event, ui ) {} );

drop( event, ui )Тип: `drop`

Срабатывает, когда перетаскиваемый элемент, который был принят, опускается на приемник (на основе опцииtolerance).

event

Тип: Event
ui

Тип: Объект
- draggable
  
  Тип: jQuery
  
  Объект jQuery, представляющий перетаскиваемый элемент.
- helper
  
  Тип: jQuery
  
  Объект jQuery, представляющий помощник, который перетаскивается.
- position
  
  Тип: Объект
  
  Текущее положение перетаскиваемого помощника в виде объекта { top, left }.
- offset
  
  Тип: Объект
  
  Текущее смещение положения перетаскиваемого помощника в виде объекта { top, left }.

Примеры кода:

Инициализировать приемник с заданным обратным вызовом drop:

$( ".selector" ).droppable({
  drop: function( event, ui ) {}
});

Связать обработчик событий с событием drop:

$( ".selector" ).on( "drop", function( event, ui ) {} );

out( event, ui )Тип: `dropout`

Срабатывает, когда перетаскиваемый элемент, который был принят, выводится за пределы приемника (на основе опцииtolerance).

event

Тип: Event
ui

Тип: Объект

Примечание: Объект ui пуст, но включен для согласованности с другими событиями.

Примеры кода:

Инициализировать приемник с заданным обратным вызовом out:

$( ".selector" ).droppable({
  out: function( event, ui ) {}
});

Связать обработчик событий с событием dropout:

$( ".selector" ).on( "dropout", function( event, ui ) {} );

over( event, ui )Тип: `dropover`

Срабатывает, когда перетаскиваемый элемент, который был принят, перемещается над приемником (на основе опцииtolerance).

event

Тип: Event
ui

Тип: Объект
- draggable
  
  Тип: jQuery
  
  Объект jQuery, представляющий перетаскиваемый элемент.
- helper
  
  Тип: jQuery
  
  Объект jQuery, представляющий помощник, который перетаскивается.
- position
  
  Тип: Объект
  
  Текущее положение перетаскиваемого помощника в виде объекта { top, left }.
- offset
  
  Тип: Объект
  
  Текущее смещение положения перетаскиваемого помощника в виде объекта { top, left }.

Примеры кода:

Инициализировать приемник с заданным обратным вызовом over:

$( ".selector" ).droppable({
  over: function( event, ui ) {}
});

Связать обработчик событий с событием dropover:

$( ".selector" ).on( "dropover", function( event, ui ) {} );

Пример:

Пара перетаскиваемого и приемника.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>droppable demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <style>
  #draggable {
    width: 100px;
    height: 100px;
    background: #ccc;
  }
  #droppable {
    position: absolute;
    left: 250px;
    top: 0;
    width: 125px;
    height: 125px;
    background: #999;
    color: #fff;
    padding: 10px;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<div id="droppable">Drop here</div>
<div id="draggable">Drag me</div>
 
<script>
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
  drop: function() {
    alert( "dropped" );
  }
});
</script>
 
</body>
</html>

Виджет Droppable