Плагин Droppable – один из нескольких плагинов, входящих в состав jQuery UI, с помощью которых можно организовать взаимодействие с элементами веб-станиц. Плагин Droppable позволяет делать выбранные элементы веб-страницы «сбрасываемыми» в некий целевой элемент. Естественно, что для того чтобы быть «сброшенным», элемент должен быть перемещаемым, а целевой элемент должен уметь принимать «сбрасываемые» элементы. Наведите указатель мыши на черный квадрат, нажмите левую клавишу мыши, переместите его внутрь зеленого квадрата и отпустите.

А теперь разберемся, как это сделать самостоятельно.

Для начала посетим страницу настраиваемой закачки на сайте jQuery UI, чтобы получить необходимые нам файлы. Щелкаем на ссылке Deselect all component, чтобы не закачивать лишнее, а затем выбираем только то, что нам потребуется – отмечаем чекбокс Droppable и видим, что вместе с ним отметились чекбоксы UI Core и Draggable. Работа плагина Droppable зависит от них, поэтому они необходимы.
Кроме этого, справа есть выпадающий список, где можно выбрать понравившуюся тему оформления. Если все готово, кликаем кнопку Download и получаем архив.

В разделе HEAD подключаем несколько файлов, которые есть в архиве.

<link type="text/css" href="css/trontastic/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

Сначала мы подключили файл стилей css/trontastic/jquery-ui-1.7.2.custom.css одной из многочисленных тем оформления. Кроме этого мы подключили файл библиотеки – js/jquery-1.3.2.min.js и файл js/jquery-ui-1.7.2.custom.min.js, в котором объединена функциональность ядра UI и плагинов Droppable и Draggable (ведь прежде, чем «сбросить» элемент, его надо переместить).

Пример HTML-разметки:

<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
<div id="result"></div>

Элемент с идентификатором #draggable будет у нас перемещаемым, элемент с идентификатором #droppable – целевым, в него можно будет «сбросить» перемещаемый элемент. Наконец, элемент с идентификатором #result будет служить для придания наглядности примеру.

Теперь смотрим javascript-код:

$(function(){
  $("#draggable").draggable();
  $("#droppable").droppable({
    drop: function(){
      $("#result").append("Dropped!");
    }
  });
});

Открыть пример в новом окне

Мы сразу же определили callback-функцию в опции drop. Это сделано в первую очередь для наглядности. Как только перемещаемый блок div будет «сброшен» в целевой блок div, в элемент с идентификатором #result будет добавлен соответствующий текст.

Но попробуем передать плагину еще пару каких-либо опций.

$(function(){
  $("#draggable").draggable();
  $("#droppable").droppable({
    activeClass: "active",
    hoverClass: "hover",
    drop: function(){
      $("#result").append("Dropped!");
    }
  });
});

Открыть пример в новом окне

Передав плагину Droppable опции activeClass и hoverClass, в которых указали имена классов, мы добились того, чтобы все время в процессе движения перемещаемого элемента, у элемента целевого присутствовала красная рамка, а в тот момент, когда перемещаемый элемент оказывается над целевым, рамка поменяет свой цвет на синий.

Плагин Droppable может принимать семь опций:
accept – в опции может быть указан селектор или функция. Все перемещаемые элементы, которые будут выбраны этим селектором, получат возможность быть «сброшенными» в элемент, к которому применена функциональность плагина Droppable. Если в этой опции определена функция, то она будет вызываться для каждого перемещаемого элемента на странице (передаваемого в функцию как первый аргумент), с целью применения пользовательского фильтра. Функция должна будет возвратить true, если элемент должен получить возможность быть «сброшенным». По умолчанию – *.
activeClass – если в этой опции определить имя класса, то он будет добавлен к целевому элементу в момент начала перемещения элемента, который должен быть «сброшен». По умолчанию – false.
addClasses – по умолчанию опция имеет значение true. Если установить false, то это предотвратит добавление класса с именем ui-droppable. Это может потребоваться в целях оптимизации при вызове .droppable() для нескольких сотен элементов.
greedy – если для этой опции установлено значение true, это предотвращает всплывание события, т.е. если «сброс» был выполнен во внутренний элемент, в то время как его родитель тоже может принимать «сбрасываемый» элемент, события drop для элемента-родителя не произойдет. По умолчанию опция имеет значение false.
hoverClass – если в этой опции определить имя класса, то он будет добавлен к целевому элементу в тот момент, когда перемещаемый элемент окажется над целевым элементом. По умолчанию – false.
scope – по умолчанию эта опция имеет значение ‘default’ и применяется в дополнение к опции accept. В опции может быть определено любое значение в виде строки и все перемещаемые элементы, с таким же значение соответствующей опции, будут иметь возможность «сброса» в целевой элемент.
tolerance – опция определяет, в какой момент необходимо произвести «сброс» элемента, при нахождении его над целевым элементом. По умолчанию имеет значение ‘intersect’, что определит «сброс» в тот момент, когда перемещаемый элемент перекрыл целевой как минимум на 50%. Другие возможные значения: fit – перемещаемый элемент должен полностью войти в целевой элемент; pointer – указатель мыши должен войти в целевой элемент; touch – перемещаемый элемент должен перекрыть целевой элемент на любую самую малую величину;

Как и другие плагины, входящие в состав UI jQuery, плагин Droppable умеет реагировать на некоторые события. Опций, в которых можно определить callback-функции, вызываемые при наступлении соответствующего события, всего пять. В самом первом примере мы уже использовали опцию drop, но если вы откроете этот пример, увидите в действии и остальные.

Опция activate – событие dropactivate происходит в момент начала движения перемещаемого элемента.
Опция deactivate – событие dropdeactivate происходит в момент окончания движения перемещаемого элемента, независимо от того, был ли он «сброшен» в целевой элемент или нет.
Опция over – событие dropover происходит в момент входа перемещаемого элемента в пределы целевого элемента.
Опция out – событие dropout происходит в момент выхода перемещаемого элемента за пределы целевого элемента.
Опция drop – событие drop происходит в момент «сброса» перемещаемого элемента в целевой элемент.

Надо отметить, что любая callback-функция, вызываемая при наступлении какого-либо события может принимать два аргумента. Первый аргумент – объект события, второй – специальный объект ui, в свойствах которого содержится следующая информация:
ui.helper – объект, характеризующий перемещаемый элемент;
ui.position – объект, в свойствах top и left которого содержится информация о положении перемещаемого элемента относительно родительского элемента;
ui.offset – объект, в свойствах top и left которого содержится информация об абсолютном положении перемещаемого элемента;

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

<button id="disable">Disable</button>
<button id="enable">Enable</button>
<button id="destroy">Destroy</button>

И теперь познакомимся с некоторыми из методов на примере:

$(function(){
  $("#draggable").draggable();
  $("#droppable").droppable({
    drop: function(event, ui){
      $("#result").append(event.type);
    }
  });
  $("#disable").click(function(){
    $("#droppable").droppable("disable");
  });
  $("#enable").click(function(){
    $("#droppable").droppable("enable");
  });
  $("#destroy").click(function(){
    $("#droppable").droppable("destroy");
  });
});

Открыть пример в новом окне

С кнопками, имеющими идентификаторы #disable, #enable и #destroy связаны обработчики события click, которые вызывают одноименные методы плагина.
Используя .droppable(«disable») можно временно удалить функциональность плагина из выбранного элемента, а с помощью .droppable(«enable») – восстановить ее. Использование .droppable(«destroy») приведет к окончательному удалению функциональности. Восстановить ее можно будет только перезагрузкой страницы.

destroy – .droppable(‘destroy’) полностью удаляет всю функциональность плагина Droppable. Возвращает элементы в состояние, предшествующее инициализации.
disable – .droppable(‘disable’) временно запрещает использование всей функциональности плагина. Вновь разрешить ее использование можно с помощью метода enable.
enable – .droppable(‘enable’)разрешает использование всей функциональности плагина, если ранее она была запрещена с использованием метода disable.
option – .droppable(‘option’, optionName, [value]) с помощью этого метода можно получить или установить значение любой опции плагина после инициализации.

Все примеры, использованные в статье, можно совершенно запросто получить в этом архиве.