Опубликовано admin - вт, 05/01/2018 - 23:02
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


Опция: activeClass


Опция: addClasses


Опция: greedy


Опция: hoverClass


Опция: scope


Опция: tolerance


Событие: activate

Событие: deactivate

Событие: over

Событие: out

Событие: drop

Метод: destroy

Метод: disable

Метод: enable

Метод: option

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

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

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

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

На разработку сайта! Скидки до 20%!