Руководство jQuery - droppable(options)

Опубликовано admin - вт, 05/01/2018 - 23:02

[Function] droppable(options)

Создать эффект «droppable» обрабатываемый jquery.

Сигнатура

droppable(options) → jQuery

Описание

Плагин jQuery UI Droppable позволяет подходящим элементам быть помещенными в другой элемент(это означает что вы получаете к ним доступ при помещении их через функцию draggable). Вы можете указать элемент (индивидуально) или тип перемещаяемого элемента, который будет доступен для помещения.
Все функция callback возвращают два аргумента: исходное событие браузера и преобразованный ui объект, о котором указано ниже в документации (если вы указали второй аргумент функции 'ui'):

Пример
Весь код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://test-drupal.ru/themes/slyweb/css/jquery-ui-1.7.2.custom.css" 
rel="stylesheet" type="text/css"/>
<script src="http://test-drupal.ru/themes/slyweb/js/jquery-1.3.2.min.js"></script>
<script src="http://test-drupal.ru/themes/slyweb/js/jquery-ui-1.7.2.custom.min.js"></script>  
<script>
  $(document).ready(function(){

$(function() {
	$("#draggable").draggable();
	$("#droppable").droppable({
		drop: function(event, ui) {
	$(this).addClass('ui-state-highlight').find('p').html('Объект принят!');
		}
	});

});


  });
</script>

</head>
<body class="iframe">


<div class="demo">
	
<div id="draggable" class="ui-widget-content">
	<p>Перетащи меня в мой объект</p>
</div>

<div id="droppable" class="ui-widget-header">
	<p>Поместить здесь</p>
</div>

</div><!-- End demo -->

<div style="display: none;" class="demo-description">

<p>Enable any DOM element to be droppable,
 a target for draggable elements.</p>

</div><!-- End demo-description -->


</body>
</html>


<style>

#draggable { width: 70px; height: 70px; 
padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 100px; height: 100px; 
padding: 0.5em; float: left; margin: 10px; }

</style>

Параметры

ui.draggable

ui.helper

ui.position

ui.offset

Опции

Опция: accept

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

"По умолчанию установлено"*

Запустить функцию droppable с заданной опцией accept.

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

Установить или получить опцию activeClass после запуска.

//Получить опцию
var accept = $('.selector').droppable('option', 'accept');
//Установить опцию
$('.selector').droppable('option', 'accept', '.special');

Опция: activeClass

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

"По умолчанию установлено"false

Инициализировать функцию droppable с заданным классом activeClass.

$('.selector').droppable({ activeClass: false });

Установить или получить опцию activeClass после запуска.

//получить опцию
var addClasses = $('.selector').droppable('option', 'activeClass');
//установить опцию
$('.selector').droppable('option', 'activeClass', false);

Опция: addClasses

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

"По умолчанию установлено"true

Инициализировать функцию droppable с заданным классом addClasses.

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

Установить или получить опцию addClasses после запуска.

//получить опцию
var addClasses = $('.selector').droppable('option', 'addClasses');
//установить опцию
$('.selector').droppable('option', 'addClasses', false);

Опция: greedy

Если установлено true, то будет предотвращена передача события для вложенных элементов.

"По умолчанию установлено"false

Инициализировать функцию droppable с заданным классом greedy.

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

Установить или получить опцию greedy после запуска.

//получить опцию
var greedy = $('.selector').droppable('option', 'greedy');
//установить опцию
$('.selector').droppable('option', 'greedy', true);

Опция: hoverClass

Если опция определена, то будет добавлен класс к объекту, в который происходит помещение (droppable) до тех пор пока существует перемещение в пределах объекта, в который помещается элемент.

"По умолчанию установлено"false

Инициализировать функцию droppable с заданным классом hoverClass.

$('.selector').droppable({ hoverClass: 'drophover' });

Установить или получить опцию hoverClass после запуска.

//получить опцию
var hoverClass = $('.selector').droppable('option', 'hoverClass');
//установить опцию
$('.selector').droppable('option', 'hoverClass', 'drophover');

Опция: scope

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

"По умолчанию установлено"default

Инициализировать функцию droppable с заданным классом scope.

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

Установить или получить опцию scope после запуска.

//получить опцию
var scope = $('.selector').droppable('option', 'scope');
//установить опцию
$('.selector').droppable('option', 'scope', 'tasks');

Опция: tolerance

Определяет, какой способ используется при проверке, когда перетаскиваемый объект находится над объектом, в которой он помещается. Допустимые значения: 'fit', 'intersect', 'pointer', 'touch'. fit: совмещение перетаскиваемого элемента и элемент в который он помещается полностью совпадает intersect: совмещение перетаскиваемого элемента и элемента в который он помещается составляет менее 50% pointer: указатель мыши совмещается с поверхностью элемента в который происходит перемещение. touch: совмещение перетаскиваемого и элемента и элемента в который происходит перемещение составляет любое значение.

"По умолчанию установлено"intersect

Запустить функцию droppable с заданным классом tolerance.

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

Установить или получить опцию tolerance после запуска.

//получить опцию
var tolerance = $('.selector').droppable('option', 'tolerance');
//установить опцию
$('.selector').droppable('option', 'tolerance', 'fit');

События

Событие: activate

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

Установить функцию обрабатывающую событие activate как инициирующую опцию.

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

Связать событие activate с типом: dropactivate.

$('.selector').bind('dropactivate', function(event, ui) {
  ...
});

Событие: deactivate

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

Установить функцию обрабатывающую событие dropdeactivate как инициирующую опцию.

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

Связать событие deactivate с типом: dropdeactivate.

$('.selector').bind('dropdeactivate', function(event, ui) {
  ...
});

Событие: over

Данное событие возникает поскольку допустимый перетаскиваемый объект перемещается над (внутри его) объектом в который он помещается.

Задать функцию, обрабатывающую событие over как инициирующую опцию.

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

Связать событие over через тип: dropover.

$('.selector').bind('dropover', function(event, ui) {
  ...
});

Событие: out

Данное событие возникает, когда допустимый перетаскиваемый элемент перемещен из элемента, в который он был ранее помещён (за допустимый элемент).

Установить функцию обрабатывающую событие out как инициирующую опцию.

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

Связать событие out через тип: dropout.

$('.selector').bind('dropout', function(event, ui) {
  ...
});

Событие: drop

Это событие возникает, когда допустимый перетаскиваемый объект помещён на (внутрь) поверхность(и) объекта в который он помещается. В функции callback, $(this) символизирует элемент в который помещен другой элемент. .ui.draggable символизирует перетаскиваемый элемент.

Установить функцию обрабатывающую событие drop как инициирующую опцию.

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

Связать событие drop через тип: drop.

$('.selector').bind('drop', function(event, ui) {
  ...
});

Методы

Метод: destroy

.droppable('destroy')

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

Метод: disable

.droppable( 'disable' )

Отклчить droppable.

Метод: enable

.droppable( 'enable' )

Включить droppable.

Метод: option

.droppable('option',optionName,[value])

Получить или установить любую опции плагина droppable. Если нет заданного значения, функция получит значение опции.

Тема:

Используемая тема jQuery UI

jQuery UI Drappable плагин использует jQuery UI CSS структуру для придания стиля, включающую цвета и фоновые текстуры. Мы рекомендуем использовать ThemeRoller инструмент для создания и загрузки тем, которые легко встраиваются и поддерживаются. Если нуждается более глубокий уровень настройки, существует особый виджет классов ссылающийся на ui.draggable.css лист стилей который может быть модифицирован. Данный класс подчеркнут жирным ниже.

Образец разметки jQuery UI CSS струтктуры классов

<div class="ui-draggable"></div

Учтите: Данный образец разметки сгенерирован через плагин draggable,это не разметка которую вы можете использовать для создания перемещения. Единственная необходимая разметка - <div></div>.

Примеры

Добавлено1.2

Версия jQuery 1.3.2 Документ создан 2009-02-21T00:32:39Z

Руководство по jQuery!

Плагины jQuery UI

Эффекты