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

<link type="text/css" href="css/le-frog/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/le-frog/jquery-ui-1.7.2.custom.css одной из многочисленных тем оформления. Кроме этого мы подключили файл библиотеки – js/jquery-1.3.2.min.js и файл js/jquery-ui-1.7.2.custom.min.js, в котором объединена функциональность ядра UI и плагина Draggable (на самом деле для использования в примерах этой статьи там содержится еще и функциональность плагинов Droppable и Sortable).

Смотрим HTML-разметку. Пусть у нас она будет выглядеть так:

<div id="draggable" class="ui-widget-content">
  <p>Drag me</p>
</div>

Связываем функциональность плагина Draggable с выбранным элементом:

$(function(){
  $("#draggable").draggable();
});

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

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

$(function(){
  $("#draggable").draggable({
    cursor: "move",
    revert: true,
    revertDuration: 3000
  });
});

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

Здесь мы изменили вид курсора во время перемещения элемента, и добились того, что по окончании перемещения элемент самостоятельно вернется в свое начальное положение в течение 3 секунд.
Остальные опции используются аналогичным образом, самое главное – знать их название и понимать какая за что отвечает.

addClasses – по умолчанию эта опция имеет значение true. Если установить значение false, то это предотвратит добавление класса ui-draggable к перемещаемым элементам. Это может потребоваться из соображений оптимизации при вызове .draggable() например, для нескольких сотен элементов.
appendTo – по умолчанию эта опция имеет значение ‘parent’. В ней можно передать селектор jQuery или элемент, который будет использован в качестве контейнера для объекта, представляющего перемещаемый элемент во все время его перемещения.
axis – вынуждает перетаскиваемый элемент перемещаться только по оси x или только по оси y. Значение по умолчанию false, что позволяет элементу перемещаться свободно.
cancel – по умолчанию эта опция имеет значение ‘input, option’. Если эти элементы находятся внутри перемещаемого элемента, то перемещаемый элемент нельзя захватить, при нахождении указателя мыши над определенными в этой опции элементами. Для выбора элементов используется селектор jQuery.
connectToSortable – разрешает «сброс» перемещаемых элементов в сортируемый (sortable) список. При этом «сброшенный» элемент становится частью списка. В качестве значения указывается селектор jQuery. По умолчанию имеет значение false. Для корректной работы необходимо дополнительно использовать опцию helper со значением ‘clone’.
containment – ограничивает перемещение внутри определенного элемента или области. В качестве значения может принимать селектор jQuery, элемент, строку или массив. Примеры возможных значений: ‘parent’, ‘document’, ‘window’, [x1, y1, x2, y2].
cursor – строка, в которой может быть передано css значение, определяющее значок для курсора в процессе перетаскивания элемента. По умолчанию – auto.
cursorAt – при перемещении элемента устанавливает курсор в определенную позицию. Например, значение {left: 5, top: 10}, при перемещении установит курсор в 10 пикселах от верхнего края и 5 пикселах от левого края.
delay – отсрочка начала времени перемещения элемента в миллисекундах. Опция используется для того, чтобы предотвратить нежелательное перемещение элемента во время случайного щелчка по нему. По умолчанию имеет значение 0.
distance – расстояние в пикселах, на которое должен переместиться курсор при удерживаемой в нажатом положении левой клавиши мыши прежде, чем начнется перемещение элемента. Опция используется для того, чтобы предотвратить нежелательное перемещение элемента во время случайного щелчка по нему. По умолчанию имеет значение 1.
grid – заставляет перетаскиваемый элемент перемещаться дискретно, по сетке, определяемой массивом передаваемых в опцию значений. Значение по умолчанию false, что позволяет элементу перемещаться свободно. Пример передаваемого значения – [10, 10].
handle – в этой опции можно определить элемент, находящийся внутри перемещаемого элемента, при нахождении над которым указателя мыши будет возможен захват перемещаемого элемента. Для выбора элементов можно использовать селектор jQuery.
helper – возможные значения опции – ‘original’, ‘clone’, Function. По умолчанию установлено значение ‘original’ – визуально наблюдается перемещении самого элемента. При использовании значения ‘clone’ перемещаться будет клон элемента, а сам элемент при этом остается на своей позиции. В опции можно определить функцию. Функция обязательно должна возвращать DOM элемент.
iframeFix – по умолчанию установлено значение false. Если установить значение true, будет предотвращен перехват события mousemove во время перемещения элемента при прохождении указателя мыши над iframe. В качестве значения может быть использован селектор jQuery – при этом предотвращение перехвата будет производиться только при прохождении указателя мыши над выбранными iframe. Опция бывает полезна при использовании совместно например с cursorAt.
opacity – устанавливает значение css-свойства opacity для элемента, находящегося в процессе перемещения. По умолчанию установлено значение false, что соответствует полной непрозрачности.
refreshPositions – по умолчанию используется значение false. При значении true позиция «сброса» элемента будет пересчитываться при каждом событии mousemove. Использовать с осторожностью! Такой подход может помочь создать очень динамичное приложение, но безусловно снизит производительность.
revert – значение по умолчанию – false. Если установить значение true, то элемент возвратится на свою исходную позицию после окончания перетаскивания. Также можно передать значения в виде строки. Возможные значения – ‘valid’ или ‘invalid’. Эти значения используются в случае, если перемещаемый элемент будет «сброшен» в какой-либо целевой элемент. При использовании значения ‘valid’ перемещаемый элемент возвратится в предыдущую позицию только в том случае, если был «сброшен» в целевой элемент. При использовании значения ‘invalid’ не возвратится в предыдущую позицию только в том случае, если он был «сброшен» в целевой элемент.
revertDuration – длительность эффекта возвращения элемента на исходную позицию, в миллисекундах. По умолчанию имеет значение 500. Опция игнорируется, если опция revert имеет значение false.
scope – значением этой опции является строка. По умолчанию установлено значение ‘default’. Перемещаемые элементы, имеющие в опции scope точно такое же значение, как и значение опции scope для элементов с функциональность droppable, будут приниматься этими элементами. По сути, дополняет опцию accept плагина Droppable.
scroll – по умолчанию установлено значение true – при перемещении элемента к краю области просмотра, она автоматически прокручивается бесконечно. Если установить значение false, эта возможность будет запрещена.
scrollSensitivity – число, определяющее расстояние в пикселах от края области просмотра, после которого она начинает прокручиваться. Расстояние определяется относительно указателя мыши, а не перемещаемого элемента. По умолчанию установлено значение 20.
scrollSpeed – число, определяющее скорость, с которой прокручивается область просмотра при приближении указателя мыши к ее краю на расстояние определенное в опции scrollSensitivity. По умолчанию установлено значение 20.
snap – по умолчанию установлено значение false. Если установить значение true (что эквивалентно ‘.ui-draggable’, поскольку значение может определяться также селектором jQuery), то перемещаемый элемент будет «прилипать» к краям выбранных элементов при прохождении около них.
snapMode – опция определяет, как именно перемещаемый элемент будет «прилипать» к выбранным элементам. Например, только к внешним или только к внутренним сторонам элементов. Возможные значения ‘inner’, ‘outer’, ‘both’. Любое значение игнорируется при snap: false. По умолчанию установлено значение ‘both’.
snapTolerance – расстояние в пикселах от перемещаемого элемента до выбранного, при котором произойдет «прилипание». По умолчанию установлено значение 20. Любое значение игнорируется при snap: false.
stack – объект, с помощью которого осуществляется автоматический контроль за свойством z-index определенной группы перемещаемых элементов, всегда помещая перемещаемый элемент поверх остальных. Значение свойства ‘group’ определяет jQuery селектор. Дополнительно можно определить свойство ‘min’, число ниже которого значение z-index опуститься не сможет. Например: $(‘.selector’).draggable({ stack: { group: ‘.selector’, min: 50 } });
zIndex – число, определяющее значение свойства z-index перемещаемого элемента. По умолчанию false.

Кроме возможности гибкой настройки плагина Draggable, есть возможность заставить его реагировать на некоторые события. Вот пример:

$(function(){
  $("#draggable").draggable({
    cursor: "move",
    stop: function(event, ui) {
  	  alert("Событие: " + event.type +
  	        "\n\ntop: " + ui.offset.top +
  	        " px\nleft: " + ui.offset.left +
  	        " px");
  	}
  });
});

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

Мы определили в опции stop callback-функцию. Функция принимает два аргумента – объекты event и ui. На простом примере показано, каким образом можно обратиться к свойствам этих объектов. В итоге, при окончании перемещения элемента, в окне предупреждения мы увидим информацию о типе наступившего события – dragstop, и текущее абсолютное положение элемента на странице.

Опций, связанных с событиями только три:
Опция start – событие dragstart наступает каждый раз при начале перемещения элемента.
Опция drag – событие drag наступает все время, пока элемент находится в процессе перемещения.
Опция stop – событие dragstop наступает каждый раз при завершении перемещения элемента.

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

Нам осталось познакомиться с методами плагина Draggable. Но для этого нам понадобится добавить в HTML-разметку пару кнопок. Вот так:

<button id="getOption">Get Option</button>
<button id="setOption">Set Option</button>

В следующем примере продемонстрировано как получать и устанавливать значения опций плагина после его инициализации:

$(function(){
 $("#draggable").draggable({
  cursor: "move"
 });
 $("#getOption").click(function(){
  alert($("#draggable").draggable("option","grid"));
 });
 $("#setOption").click(function(){
  $("#draggable").draggable("option","grid",[50,50]);
 });
});

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

Мы связали с кнопками Get Option и Set Option событие click. При щелчке на кнопке Get Option мы вызовем метод option, название которого указываем в первом аргументе, а во втором аргументе передаем название опции, значение которой мы хотели бы получить. В итоге мы увидим окно предупреждения, в котором будет показано значение false, поскольку при инициализации эта опция не была определена, а по умолчанию она имеет именно такое значение.
Попробуйте перетаскивать элемент с помощью мыши – он будет плавно перемещаться в любых направлениях.

Сделаем щелчок на кнопке Set Option, снова вызывая метод option, но теперь мы передаем три аргумента. Первый – название метода, второй – название опции, значение которой мы хотим изменить, и третий аргумент – новое значение опции. Таким образом, передав опции grid значение [50,50] мы заставим элемент перемещаться дискретно, вдоль сетки с шагом 50х50 пикселей.

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

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

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

Итак, что мы можем получить подключив несколько javascript-файлов, задав соответствующее стилевое оформление и написав вот такой небольшой кусочек кода.

$("#example").dialog();

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

Принимайте во внимание, что пример демонстрируется во фрейме.

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

В раздел HEAD понадобится подключить довольно много файлов: кроме самой библиотеки jQuery – jquery-1.2.1.js, файлы jquery.dimensions.js, ui.resizable.js, ui.draggable.js, ui.mouse.js и конечно ui.dialog.js

<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.dialog.js"></script>
<script type="text/javascript" src="js/ui.resizable.js"></script>
<script type="text/javascript" src="js/ui.mouse.js"></script>
<script type="text/javascript" src="js/ui.draggable.js"></script>

В исходном коде примера Вы сможете посмотреть стилевую таблицу, отвечающую за отображение диалогового окна и при необходимости отредактировать ее под свой дизайн. Обращаю Ваше внимание на, то что имена классов менять нежелательно. В противном случае Вам придется самостоятельно править код в файле ui.dialog.js.

HTML-код не представляет собой ничего интересного – элемент div, который будет служить диалоговым окном с идентификатором и именем класса.

И наконец приведу полностью тот код, который отвечает за диалоговое окно.

<script type="text/javascript">
$(document).ready(function(){
  $("#example").dialog({
    title: "Пример диалогового окна",
    width: 250,
    height: 150,
    resizable: true,
    draggable: true,
    position: "center",
    buttons: {
      "Отправить": function() {
        alert("Вы нажали кнопку Отправить");
      },
      "Закрыть": function() {
        $(this).dialog("close");
        alert("Вы нажали кнопку Закрыть");
      }
    }
  });
});
</script>

Элемент с идентификатором #example будет служить диалоговым окном. В файле ui.dialog.js большинство опций заданы по умолчанию, мы же для примера попробуем переопределить большинство из них.
title: ‘Пример диалогового окна’ – задаем название диалогового окна.
width: 250 – ширина окна в px.
height: 150 – высота окна в px.
resizable: true – диалоговое окно может (или false – не может) изменять свои размеры.
draggable: true – диалоговое окно может (или false – не может) перемещаться по экрану.
position: center – начальное положение окна на экране. Доступны значения center, left, top.
buttons – об этом несколько подробнее. Эта опция определяет кнопки, которые понадобится отображать в диалоге. Определяются они парами ключ/значение, где ключ – это текст, который необходимо отобразить на кнопке, а в качестве значения может выступать функция, которая должна быть вызвана при клике на соответствующую кнопку.

Вот собственно и все. А внутри диалогового окна можно предусмотреть то, что угодно Вам. Будь то авторизационная форма или форма для отправки e-mail с сайта, или еще что-то…

$("#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.

$(".block").draggable();

И это почти все! В этом коде сообщается, что перемещаемыми элементами становятся все элементы с классом block. Но опять же, разработчики предлагают большой набор различных опций, с помощью которых можно извлекать какую-либо практическую пользу. Иначе зачем таскать блоки по странице? Только лишь с целью поразить пользователя? Нет конечно.
Давайте сначала посмотрим пример того, как это работает, а затем мы разберем код, который обеспечивает эту возможность. В примере задана опция возврата элемента на исходную позицию после окончания его перемещения.

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

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

<script src="js/jquery-1.2.1.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>

Первым подключается библиотека jQuery, а затем – файл, выполняющий обработку событий мышки. Два следующих файла работают непосредственно над перемещением элементов по странице.
Далее в этом же разделе HEAD следует таблица стилей в которой мы определим класс (это может быть например и идентификатор) для элементов, которые хотим сделать свободно перемещаемыми.
И наконец код… Естественно, в примере используются не все возможные опции, но я думаю, что сами принципы пример может продемонстрировать неплохо.

$(document).ready(function(){
    $(".block").draggable({
        revert: true,
        drag: function(e,ui) {
            $(this).css("background-color","#E2F2E2");
            $("#position").text("Положение перемещаемого
            элемента - слева: " + ui.position.left + "px,
            а сверху: " + ui.position.top + "px");
        },
        stop: function(e,ui) {
            $(this).css("background-color", "#58AEFC");
        }
    });
});

Весь код «обернут» уже немного знакомой нам

$(document).ready(function(){
...
});

которая отслеживает момент готовности объектной модели документа (DOM).

Это чем-то похоже на событие onload, но в отличие от него разрешает выполнение javascript сразу после того, как DOM готова к работе, а не после полной загрузки страницы.

Итак, вначале мы сообщаем, что перемещаемыми элементами будут все элементы с классом block. А затем просто перечисляем те опции, которые мы хотим использовать.

revert: true указывает на то, что после окончания процесса перетаскивания, элемент должен вернуться на прежнее место.
Опция drag содержит функцию, которая будет выполняться во время самого процесса перетаскивания элемента. В этой функции мы сначала задаем свойство background-color для перетаскиваемого элемента (по-русски – меняем его цвет), а затем в элемент с идентификатором #position вставляем строку текста, в которой сообщаем текущее пололжение левого верхнего угла перетаскиваемого элемента относительно окна браузера.
В опции stop мы определяем функцию, которая выполнится в момент остановки процесса перемещения элемента и просто вернет цвет элемента к начальному.

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

axis – ограничивает перемещение по горизонтальной (x) или вертикальной (y) осям.
containment – ограничивает перемещение к в пределах границ указанного элемента – может быть элемент DOM, родительский элемент, документ или селектор jQuery.
effect – эффекты от начала перемещения до остановки. Возможно например FadeIn при старте и FadeOut при остановке.
opacity – прозрачность перемещаемого элемента.
revert – если истина, элемент вернется на позицию откуда было начато перемещение.
start(e,ui), drag(e,ui) и stop(e,ui) – функции, которые могут вызываться при начале, окончании или процессе перетаскивания элементов.