Drag and Drop корзина покупок на jQuery

Здравствуйте, уважаемые читатели XoZbloga! Для технологии Drag and Drop (перетащил и бросил) можно найти много способов применения, но корзина покупок в интернет магазине является пожалуй, самой распространенной. В этом уроке мы создадим простую корзину, в которую одним движением курсора мышки можно перенести товар. Корзина будет иметь следующую функциональность: можно добавлять не ограниченное количество одного и того же товара, количество можно указать вручную, а также удалить каждую позицию в корзине.

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

Конечный результат можно посмотреть на демонстрационной странице или скачать исходники.

Шаг 1: получить пакет jQuery UI

JQuery UI имеет множество функций. И чтобы не перегружать страницу скачаем только необходимые компоненты, тем более такую возможность нам предоставляют. Качать ЗДЕСЬ.

На скриншоте ниже Вы можете видеть, что именно нам понадобится:


Необходимые компоненты библиотеки jQuery UI для корзины

В итоге получается файл размером около 38кб:

Каталог проекта

Шаг 2: подключаем библиотеки

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

1
2
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery-ui-1.9.2.custom.min.js"></script>

Шаг 3: HTML разметка

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<section id="product">
    <ul class="clear">
        <li data-id="1">
            <a href="#">
                <img src="http://lorempixel.com/150/100/technics/1/" alt="">
                <h3>Название товара</h3>
                <p>Описание</p>
            </a>
        </li>
        <li data-id="2">...</li>
        <li data-id="3">...</li>
    </ul>
</section>

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

Теперь переходим к самой корзине. Располагаться она будет справа. Определим область корзины, как сайдбар с помощью тега aside.

1
2
3
4
5
6
7
8
9
10
11
12
13
<aside id="sidebar">
    <div class="basket">
        <div class="basket_list">
            <div class="head">
                <span class="name">Наименование</span>
                <span class="count">Кол-во</span>
            </div>
            <ul>
                <!-- Здесь будут располагаться позиции перемещенных товаров -->
            </ul>
        </div>
    </div>
</aside>

На этом с разметкой закончим. Теперь можно посмотреть, что получилось и переходить к самому интересному!

Список товаров и корзина

Шаг 4: перетаскивание

В качестве объекта перетаскивания выступает элемент маркированного списка. Поэтому с помощью селектора определяем эффект перетаскивания для всех элементов списка.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// jQuery UI Draggable
$("#product li").draggable({
     
   // возвращает товар обратно на свое место после перетаскивания
   revert:true,
     
   // как только начинается перетаскивание мы делаем прозрачными остальные объекты
   // добавляем класс CSS
   drag:function () {
      $(this).addClass("active");
      $(this).closest("#product").addClass("active");
   },
   
   // удаляем CSS классы после перетаскивания
   stop:function () {
      $(this).removeClass("active").closest("#product").removeClass("active");
   }
});

Шаг 4: помещение

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// jQuery Ui Droppable
$(".basket").droppable({
     
   // CSS класс для корзины, срабатывает в момент начала перетаскивания товара
   activeClass:"active",
     
   // CSS класс для корзины при появлении товара в области корзины
   hoverClass:"hover",
   
   // Определим режим сбрасывания. Сбросить товар можно при приближении к корзине
   // Возможные другие значения http://api.jqueryui.com/droppable/#option-tolerance
   tolerance:"touch",
   drop:function (event, ui) {
     
      var basket = $(this),
      move = ui.draggable,
      itemId = basket.find("ul li[data-id='" + move.attr("data-id") + "']");
     
      // Если такой товар уже есть в корзине то добавляем +1 к количеству
      if (itemId.html() != null) {
         itemId.find("input").val(parseInt(itemId.find("input").val()) + 1);
      }
      else {
         // Иначе добавляем товар в корзину (функция ниже)
         addBasket(basket, move);
     
         // И добавляем количество
         move.find("input").val(parseInt(move.find("input").val()) + 1);
      }
   }
});

С помощью селектора к блоку basket применяем метод .droppable, в котором определяем стандартные параметры и что должно происходить при помещении элемента в эту область (корзины).

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

1
2
3
4
5
6
function addBasket(basket, move) {
   basket.find("ul").append('<li data-id="' + move.attr("data-id") + '">'
      + '<span class="name">' + move.find("h3").html() + '</span>'
      + '<input class="count" value="1" type="text">'
      + '<button class="delete">&#10005;</button>');
   }

И последним штрихом будет, удаление товара из корзины.

1
2
3
$("body").on("click", ".basket ul li button.delete", function() {
    $(this).closest("li").remove();
});

Если происходит клик по «крестику», то удаляем элемент списка.

Эффект перетаскивание в действии

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!