Пример использования

$(document).ready(function() {

$("#tabs").tabs();
//Код первой вкладки (стандартное использование)
   $("#drag1").draggable({revert:true});
   $("#drop1").droppable({drop:function(){
      $(this).addClass("ui-state-highlight");
      $(this).html("<b>Элемент был перетащен успешно!</b>");
   }});
//Код второй вкладки (принимаемые элементы)
   $("#drag2").draggable({revert:true});
   $("#drag3").draggable({revert:true});
   $("#drop2").droppable({accept:'#drag3'},{drop:function(){
      $(this).addClass("ui-state-highlight");
      $(this).html("<b>Элемент был перетащен успешно!</b>");
   }});
//Код третьей вкладки (обратная связь с пользователем)
   $("#drag4").draggable({revert:true});
   $("#drag5").draggable({revert:true});
   $("#drop3").droppable({accept:'#drag5',activeClass:'drags'},{drop:function(){
      $(this).addClass("ui-state-highlight");
      $(this).html("<b>Элемент был перетащен успешно!</b>");
   }});
   $("#drag6").draggable({revert:true});
   $("#drag7").draggable({revert:true});
   $("#drop4").droppable({accept:'#drag7',hoverClass:'dragh'},{drop:function(){
      $(this).addClass("ui-state-highlight");
      $(this).html("<b>Элемент был перетащен успешно!</b>");
   }});

});

Определение и использование

С помощью метода droppable Вы можете определить область для приема перетаскиваемых элементов.

Всем областям во время создания автоматически назначается класс .ui-droppable.

С помощью опций и событий перечисленных в таблицах далее на данной странице Вы можете настраивать поведение областей под конкретные нужды.

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

Синтаксис

$(селектор).droppable(опции_или_события)

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

опции настраивают дополнительные аспекты поведение области. Все доступные опции рассмотрены в таблице далее.

события события связанные с областями. Все события рассмотрены в таблице далее.

Опции

События

Все обработчики событий принимают два аргумента - стандартный объект event браузера и специальный объект ui.

Объект ui имеет следующие свойства:

• ui.draggable - текущий перетаскиваемый элемент.
• ui.helper - текущий перетаскиваемый элемент помощник.
• ui.position - смещение текущей позиции помощника относительно прежней позиции в пикселях (ui.position.left - содержит смещение по горизонтали, ui.position.top - содержит смещение по вертикали).
• ui.offset - смещение текущей позиции помощника относительно границ страницы в пикселях (ui.offset.left - смещение по горизонтали, ui.offset.top - смещение по вертикали).

Синтаксис

$(селектор).droppable({событие:function(event,ui){Код обработчика}})
//или 
$(селектор).bind("dropсобытие",function(event,ui){Код обработчика})

Обратите внимание: например для того, чтобы привязать к области с id='test' обработчик события create, который выводит сообщение "привет" необходимо будет написать следующий код: $("#test").droppable({create:function(event,ui){alert("Привет")}}).