Для начала посетим страницу настраиваемой закачки на сайте 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]) с помощью этого метода можно получить или установить значение любой опции плагина после инициализации.

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

$("#menuList").sortable();

где #menuList – это идентификатор списка.
В меню справа использованы некоторые дополнительно установленные опции. Код конечно немного посложнее, но и в нем нет абсолютно ничего страшного.

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

А теперь разберем примеры более подробно. Этот пример для своей корректной работы требует подключения достаточно большого количества различных вспомогательных файлов.

<script src="js/jquery-1.2.1.js" type="text/javascript"></script>
<script src="js/jquery.dimensions.js" type="text/javascript"></script>
<script src="js/ui.mouse.js" type="text/javascript"></script>
<script src="js/ui.draggable.js" type="text/javascript"></script>
<script src="js/ui.draggable.ext.js" type="text/javascript"></script>
<script src="js/ui.droppable.js" type="text/javascript"></script>
<script src="js/ui.droppable.ext.js" type="text/javascript"></script>
<script src="js/ui.sortable.js" type="text/javascript"></script>

Все файлы уже знакомы по предыдущим примерам. Добавился только один файл ui.sortable.js, который (как и все остальные) мы подключаем в разделе HEAD нашей страницы.
Из таблицы стилей остановлюсь только на небольшом моменте, поскольку это по большому счету дело вкуса.

.dragStyle {
  background:#CFD4E6;
  border:1px solid #727EA3;
}

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

Далее полностью приведен кусок кода, который и отвечает за работу обоих списков.

<script type="text/javascript">
$(document).ready(function(){
  $("#menuList").sortable(); // 1-ый спискок

  $("#menuList2").sortable({ // 2-ой список
	hoverClass: "dragStyle",
	start: function(ev, ui) {
	  var text = $(ui.draggable.element).text();
	  $("#result").text("Перемещаем " + text);
	},
	stop: function(ev, ui) {
	  $("#result").text("Перемещение окончено!");
	}
  });
});
</script>

Вот так просто. За работу первого списка отвечает всего-навсего одна строка кода. Для второго списка мы используем некоторые дополнительные опции.
hoverClass – опция содержит название класса, который будет применен в процессе перемещения одного из пунктов списка, чтобы указать место, куда перемещаемый пункт будет «сброшен».
start – здесь указываем функцию, которая выполнится в момент старта перемещения элемента списка. В этой функции мы обращаемся к перемещаемому элементу, получаем его содержимое в виде текста и записываем в переменную text. Затем отыскиваем элемент #result и вставляем текст туда.
stop – указываем функцию, которая выполнится в момент, когда произошел «сброс» элемента на нужную позицию (независимо от того изменилась ли фактическая позиция элемента). Тут тоже все предельно просто – вставляем текст сообщения в элемент #result.

Я использовал для примера всего несколько опций, а их полный список опций можно найти на сайте разработчиков библиотеки.

Буду рад, если найдете возможность оставить свой комментарий или задать вопросы.

Как всегда сначала попробуем испытать готовый пример, а затем разберемся как работает этот код. Берем мышкой нужный продукт и тащим его в корзину. Над корзиной отпускаем и смотрим, что получилось…

Чтобы не усложнять код примера, не применяются некоторые проверки, которые должны быть использованы в целях безопасности в реальных интернет-магазинах.

Вы можете сохранить исходный код примера и при наличии у Вас библиотеки jQuery, воспроизвести его на своем сайте.

Чтобы все это работало, нам потребуется подключить к нашей странице, в разделе HEAD довольно много файлов (за исключением самой библиотеки эти файлы не очень большие):

<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/ui.mouse.js"></script>
<script type="text/javascript" src="js/ui.draggable.js"></script>
<script type="text/javascript" src="js/ui.draggable.ext.js"></script>
<script type="text/javascript" src="js/ui.droppable.js"></script>
<script type="text/javascript" src="js/ui.droppable.ext.js"></script>

Большинство их уже знакомы по предыдущим примерам, добавились только ui.droppable.js и ui.droppable.ext.js, которые и обеспечат нам те возможности, которые мы собираемся рассмотреть.

Не будем очень уж внимательно рассматривать таблицу стилей, поскольку здесь в основном это дело вкуса. Остановлюсь только на ее отдельных моментах.

.products {
  float:left;
}
#basket {
  background-color:#e9b96e;
  border:3px double #c17d11;
  width:150px;
  height:120px;
  margin:10px;
  padding:3px;
  position:absolute;
  top:5px;
  right:5px;
}

В работе примера используются элементы с классом .products и идентификатором #basket (понятно, что products – это товары интернет-магазина, а basket – корзина). Никаких подводных камней тут нет, можно использовать любой стиль отображения этих элементов. Единственное, что необходимо учитывать – наш скрипт будет обращаться к этим элементам по имени класса и идентификатора.
Можно упомянуть еще два класса из таблицы стилей:

.droppable-active {
	outline:1px dotted #F00;
}
.droppable-hover {
	outline:1px dotted #00F;
}

Класс .droppable-active будет использован скриптом в тот момент, когда процесс перемещения элемента уже начался, но перемещаемый элемент еще не находится «в зоне действия» целевого элемента. А класс .droppable-hover будет применен, когда перемещаемый элемент окажется над целевым.

Сам HTML-код вообще не представляет собой ничего особенного: несколько картинок, целевой блок, блок вывода результатов. Все это Вы сможете посмотреть, если скачаете файл примера. А вот сам JavaScript, который все это обрабатывает, разберем подробнее. Код получился немножко длинноват, но очень хотелось сделать более-менее красивый пример, а не полуфабрикат…

<script type="text/javascript">
$(document).ready(function(){

// ---- DRAGGABLES & DROPPABLES -----
$("div.products").draggable({
  helper: clone,
  opacity: 0.5
});

$("#basket").droppable({
  accept: ".products",
  activeClass: "droppable-active",
  hoverClass: "droppable-hover",
  drop: function(ev, ui) {
    var code = $(ui.draggable.element)
    .find("img").attr("id");
    if($(this).find("div[@id="+ code +"]")
      .html()==null) {
      var name = $(ui.draggable.element)
      .find("img").attr("alt");
      $(this).append("
<div class="basket" id=" + code + ">
<input type="text" class="qnt"/> " + name +
"<img src="droppable-delete.gif" class="delete"
alt="Удалить" /></div>
");
    }
  // *******************
  $(".delete").click(function () {
    $(this).parent().remove();
  });
  // *******************
  // *******************
  $("#buy").click(function () {
    var databox = new Array();
    $("#basket").find("input[@type=text]")
      .each(function(){
      var qnt = $(this).attr("value");
      if(qnt===undefined) { qnt = 0; }
      	var text = $(this).parent().text();
      	databox[databox.length] =  text + " - " + qnt;
      });
      data = databox.join(" кг, ");
      $("#buyResult").html("Вы заказали:" + data +
" кгСпасибо за покупку!");
    });
  // ****************
  }
});
// ------ DRAGGABLES & DROPPABLES ------
});
</script>

Как обычно используем $(document).ready(function(){…}); которая отслеживает момент готовности объектной модели документа (DOM). В нее «завернуто» все, что мы написали. И начнем разбираться дальше.

$("div.products").draggable({
  helper: clone,
  opacity: 0.5
});

Это уже должно быть немножко знакомо: выбираем набор элементов DIV, имеющих класс .products и делаем любой из них свободно перемещаемым, задавая при этом некоторые опции. helper: clone – при перемещении элемента он останется на месте, а перемещать с помошью мыши мы будем его клон, opacity: 0.5 – прозрачность которого во время перемещения будет 0,5.

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

$("#basket").droppable({
  accept: ".products",
  activeClass: "droppable-active",
  hoverClass: "droppable-hover"

Выбираем элемент с идентификатором basket и делаем его droppable – туда будем «сбрасывать» перемещаемые элементы. Далее устанавливаем необходимые опции:
accept: «.products» – «сбросить» мы можем только элементы, имеющие класс products.
activeClass: «droppable-active» – имя класса, который будет применен к #basket во время перемещения любого из элементов с классом .products, но до того, как перемещаемый элемент окажется «в зоне действия» элемента #basket.
hoverClass: «droppable-hover» – все тоже самое, только класс будет применен тогда, когда перемещаемый элемент попадет в «зону действия» элемента #basket.
В опции drop – устанавливается функция, которая должна будет выполниться в момент, когда мы «сбросили» перемещаемый элемент. Простор для фантазии – обрабатывайте данные как угодно. Я кратко немного прокомментирую, что написано дальше.

var code = $(ui.draggable.element)
.find("img").attr("id");

Мы обращаемся к перемещаемому элементу, находим в нем (именно в нем) элемент img и получаем значение его атрибута id. Сохраняем в переменной code.

if($(this).find("div[@id="+ code +"]").html()==null)

Здесь будем проверять, нет ли уже в нашей корзине товара с таким же id. Для этого обратимся к элементу, который представляет собой нашу корзину (this в данном случае тоже самое, что и #basket), найдем элемент div с id равным id перемещаемого элемента (хранится в переменной code) и получим его HTML-код. Сравним с null. Если условие верное, значит такого продукта в корзине еще нет и мы можем выполнять следующие операторы, чтобы добавить товар в корзину.

var name = $(ui.draggable.element)
.find("img").attr("alt");

Обращаемся к перемещаемому элементу (это уже делали, правда?), ищем img, получаем значение атрибута alt, где у нас хранится название товара.
Теперь осталось только сформировать нужный HTML-код и добавить его в корзину, т.е. в элемент #basket.

$(this).append('<p class="basket" id=' + code + '>
<input class="qnt" type="text" /> ' + name +
'<img src="droppable-delete.gif" class="delete" alt="Удалить" />');</p>

Тут вроде бы все достаточно понятно. И осталось написать еще пару вспомогательных функций, чтобы пример был хоть немного действующим. Приводить их еще раз тут не буду (можете посмотреть их в полном коде), просто поясню, что первая обрабатывает клик мышкой на картинке удаления товара из корзины и собственно удаляет выбранный элемент div. А вторая обходит все имеющиеся текстовые поля ввода, собирает их значения в массив, объединяет массив в строку и выводит результат в виде HTML-кода в элемент #buyResult.