♥ § Клуб Одиноких Сердец :: Элемент Падающий (Droppable) плагина UI библиотеки jQuery ♥

Описание: Создает области падения для Переносимых элементов.
Description: Create targets for draggable elements.

Пример странички Падающий дефолтный (Default functionality):
можно посмотреть здесь.

Пример странички Падающий Принимаемый (accept):
можно посмотреть здесь.

Пример странички Падающий Предохраняемый:
можно посмотреть здесь.

Пример странички Падающий Информационный:
можно посмотреть здесь.

Пример странички Падающий Возвращаемый:
можно посмотреть здесь.

Пример странички Падающий Коммерческий:
можно посмотреть здесь.

Пример странички Падающий Наглядный:
можно посмотреть здесь.

---

Теория

Тесты по теории можно посмотреть здесь.

---

Options (Опции)

---

accept
Type: Selector or Function()
Default: "*"

Controls which draggable elements are accepted by the droppable.
Multiple types supported:
• Selector: A selector indicating which draggable elements are accepted.
• Function: A function that will be called for each draggable on the page (passed as the first argument to the function). The function must return true if the draggable should be accepted.

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

Code examples: (Примеры кода: )
Initialize the droppable with the accept option specified:
Инициализация Падающего с определенной опцией accept:



Get or set the accept option, after initialization:
Можно получить или установить опцию accept после инициализации:

---

activeClass
Type: String
Default: false

If specified, the class will be added to the droppable while an acceptable draggable is being dragged.

Если определен, данный класс будет добавлен к Падающему, когда принимаемый Перетаскиваемый будет перетаскиваться.

Code examples: (Примеры кода: )
Initialize the droppable with the activeClass option specified:
Инициализация Падающего с определенной опцией activeClass:



Get or set the activeClass option, after initialization:
Можно получить или установить опцию activeClass после инициализации:

---

addClasses
Type: Boolean
Default: true

If set to false, will prevent the ui-droppable class from being added. This may be desired as a performance optimization when calling .droppable() init on hundreds of elements.

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

Code examples: (Примеры кода: )
Initialize the droppable with the addClasses option specified:
Инициализация Падающего с определенной опцией addClasses:



Get or set the addClasses option, after initialization:
Можно получить или установить опцию addClasses после инициализации:

---

disabled
Type: Boolean
Default: false

Disables the droppable if set to true.

Выключает Падение, если опция установлена на значение true (истина).

Code examples: (Примеры кода: )
Initialize the droppable with the disabled option specified:
Инициализация Падающего с определенной опцией disabled:



Get or set the disabled option, after initialization:
Можно получить или установить опцию disabled после инициализации:

---

greedy
Type: Boolean
Default: false

By default, when an element is dropped on nested droppables, each droppable will receive the element. However, by setting this option to true, any parent droppables will not receive the element.

Жадный (greedy) - по умолчанию, когда элемент падает на вложенные места падения, каждое место падения получит элемент. Однако, установив опцию на значение true (истина), каждое родительское место падения не получит элемент.

Code examples: (Примеры кода: )
Initialize the droppable with the greedy option specified:
Инициализация Падающего с определенной опцией greedy:



Get or set the greedy option, after initialization:
Можно получить или установить опцию greedy после инициализации:

---

hoverClass
Type: String
Default: false

If specified, the class will be added to the droppable while an acceptable draggable is being hovered over the droppable.

Если определен, данный класс будет добавлен к Падающему, когда принимаемый Перетаскиваемый двигается через место падения.

Code examples: (Примеры кода: )
Initialize the droppable with the hoverClass option specified:
Инициализация Падающего с определенной опцией hoverClass:



Get or set the hoverClass option, after initialization:
Можно получить или установить опцию hoverClass после инициализации:

---

scope
Type: String
Default: false

Used to group sets of draggable and droppable items, in addition to the accept option. A draggable with the same scope value as a droppable will be accepted.

Используется для группирования множества Перетаскиваемых и Падающих элементов, в добавление к опции accept (принимать). Перетаскиваемый с тем же значением опции scope (счет), что и у Падающего будет принят.

Code examples: (Примеры кода: )
Initialize the droppable with the scope option specified:
Инициализация Падающего с определенной опцией scope:



Get or set the scope option, after initialization:
Можно получить или установить опцию scope после инициализации:

---

tolerance
Type: String
Default: "intersect"

Specifies which mode to use for testing whether a draggable is hovering over a droppable.
Possible values:
• "fit": Draggable overlaps the droppable entirely.
• "intersect": Draggable overlaps the droppable at least 50% in both directions.
• "pointer": Mouse pointer overlaps the droppable.
• "touch": Draggable overlaps the droppable any amount.

Определяет, какой мод использовать для проверки, прошел ли Перетаскиваемый через место падения.
Возможные значения:
• "fit" (установочный мод): Перетаскиваемый полностью прошел над местом падения.
• "intersect" (пересекание): Перетаскиваемый прошел над местом падения по меньшей мере 50% пути в обоих направлениях.
• "pointer" (указательный мод): Курсор мыши над областью падения.
• "touch" (касание): Перетаскиваемый частично прошел над местом падения.

Code examples: (Примеры кода: )
Initialize the droppable with the tolerance option specified:
Инициализация Падающего с определенной опцией tolerance:



Get or set the tolerance option, after initialization:
Можно получить или установить опцию tolerance после инициализации:

---

Methods (Методы)

---

destroy()
Removes the droppable functionality completely. This will return the element back to its pre-init state.
• This method does not accept any arguments.

Полностью удаляет функциональность Падающего. Возвращает элемент обратно в состояние до инициализации.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the destroy method:
Запуск метода destroy (разрушить):

---

disable()
Disables the droppable.
• This method does not accept any arguments.

Выключает Падающего.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the disable method:
Запуск метода disable (выключить):

---

enable()
Enables the droppable.
• This method does not accept any arguments.

Включает Падающий.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the enable method:
Запуск метода enable (включить):

---

option( optionName )
Returns: Object
Gets the value currently associated with the specified optionName.
Получает значение, связанное с определенным optionName (имя опции).
• optionName
Type: String
The name of the option to get.
Имя опции, для которой получаем значение.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:

---

option()
Returns: PlainObject
Gets an object containing key/value pairs representing the current droppable options hash.
• This method does not accept any arguments.

Получает объект, содержащий пары key/value (ключ/значение), представляющий текущее состояние набора значений Падающего.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:

---

option( optionName, value )
Sets the value of the droppable option associated with the specified optionName.
Устанавливает значение опции Падающего, связанное с определенным optionName (именем опции).

• optionName
Type: String
The name of the option to set.
Имя опции для установки.

• value
Type: Object
A value to set for the option.
Значение, которое устанавливается для опции.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:

---

option( options )
Sets one or more options for the droppable.

Устанавливает одну или более опций для Падающего.

• options
Type: Object
A map of option-value pairs to set.
Карта пар option-value (опция-значение) для установки.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:

---

widget()
Returns a jQuery object containing the droppable element.
• This method does not accept any arguments.

Возвращает объект jQuery, содержащий падающий элемент.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the widget method:
Запуск метода виджета:

---

Events (События)

---

activate( event, ui )
Type: dropactivate

Triggered when an accepted draggable starts dragging. This can be useful if you want to make the droppable "light up" when it can be dropped on.

• event
Type: Event

• ui
Type: Object
◦ draggable
Type: jQuery
A jQuery object representing the draggable element.
◦ helper
Type: jQuery
A jQuery object representing the helper that is being dragged.
◦ position
Type: Object
Current CSS position of the draggable helper as { top, left } object.
◦ offset
Type: Object
Current offset position of the draggable helper as { top, left } object.

Code examples: (Примеры кода: )
Initialize the droppable with the activate callback specified:

Bind an event listener to the dropactivate event:

---

create( event, ui )
Type: dropcreate

Triggered when the droppable is created.

• event
Type: Event

• ui
Type: Object

Code examples: (Примеры кода: )
Initialize the droppable with the create callback specified:

Bind an event listener to the dropcreate event:

---

deactivate( event, ui )
Type: dropdeactivate

Triggered when an accepted draggable stops dragging.

• event
Type: Event

• ui
Type: Object
◦ draggable
Type: jQuery
A jQuery object representing the draggable element.
◦ helper
Type: jQuery
A jQuery object representing the helper that is being dragged.
◦ position
Type: Object
Current CSS position of the draggable helper as { top, left } object.
◦ offset
Type: Object
Current offset position of the draggable helper as { top, left } object.

Code examples: (Примеры кода: )
Initialize the droppable with the deactivate callback specified:

Bind an event listener to the dropdeactivate event:

---

drop( event, ui )
Type: drop

Triggered when an accepted draggable is dropped on the droppable (based on the tolerance option).

• event
Type: Event

• ui
Type: Object
◦ draggable
Type: jQuery
A jQuery object representing the draggable element.
◦ helper
Type: jQuery
A jQuery object representing the helper that is being dragged.
◦ position
Type: Object
Current CSS position of the draggable helper as { top, left } object.
◦ offset
Type: Object
Current offset position of the draggable helper as { top, left } object.

Code examples: (Примеры кода: )
Initialize the droppable with the drop callback specified:

Bind an event listener to the drop event:

---

out( event, ui )
Type: dropout

Triggered when an accepted draggable is dragged out of the droppable (based on the tolerance option).

• event
Type: Event

• ui
Type: Object

Code examples: (Примеры кода: )
Initialize the droppable with the out callback specified:

Bind an event listener to the dropout event:

---

over( event, ui )
Type: dropover

Triggered when an accepted draggable is dragged over the droppable (based on the tolerance option).

• event
Type: Event

• ui
Type: Object
◦ draggable
Type: jQuery
A jQuery object representing the draggable element.
◦ helper
Type: jQuery
A jQuery object representing the helper that is being dragged.
◦ position
Type: Object
Current CSS position of the draggable helper as { top, left } object.
◦ offset
Type: Object
Current offset position of the draggable helper as { top, left } object.

Code examples: (Примеры кода: )
Initialize the droppable with the over callback specified:

Bind an event listener to the dropover event:

---

Overview (Обзор)
The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on by draggables). You can specify which draggables each will accept.

Плагин Падающий (jQuery UI Droppable) делает выбранные элементы Падающими (означает, что они будут приняты, когда будут брошены в роли Перетаскиваемых). Можно определить, какие перетаскиваемые будут приниматься на определенные места падения.

---

A pair of draggable and droppable elements.
Этот пример можно посмотреть здесь.

---

Примеры Падающих на этом сайте: Дефолтный, Принимаемый, Предохраняемый, Информационный, Возвращаемый, Коммерческий, Наглядный.

---