Регистрация Войти
Портал сельхозпроизводителей ПК ЗАБАГРО Перейти

R.A.R.O.B.O.T.E.X http://robotex.zabagro.ru [Избранное] [Копировать] [Закладки] [RSS]

Блог

Создание корзины c перетаскивани товара

Топ 1Читали блог: 199 Создано: 21-10-2016 14:20 |Личные категории:WEB Дизайн|Категории:Дизайн и графика

Создание корзины c возможностью перетаскивания в нее товара.


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

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

Посмотреть Demo

Код отображение товаров на странице:
  1. <ul class="products">
  2. <li>
  3. <a href="#" class="item">
  4. <img src="images/shirt1.gif"/>
  5. <div>
  6. Balloon

  7. Price:$25

  • <li>
  • <a href="#" class="item">
  • <img src="images/shirt2.gif"/>
  • <div>
  • Feeling

  • Price:$25

  • <!-- other products -->
  • </ul>
  • Как вы можете видеть в приведенном выше коде, мы добавляем элемент <ul>, который содержит некоторые элементы <li>, чтобы отобразить продукты. Каждый продукт имеет имя и свойства цене, которая находится внутри

    элемент.

    Build the cart:
    1. <div class="cart">
    2. <h1>Shopping Cart</h1>
    3. <table id="cartcontent" style="width:300px;height:auto;">
    4. <thead>
    5. <tr>
    6. <th field="name" width=140>Name</th>
    7. <th field="quantity" width=60 align="right">Quantity</th>
    8. <th field="price" width=60 align="right">Price</th>
    9. </tr>
    10. </thead>
    11. </table>
    12. <p class="total">Total: $0

    13. <h2>Drop here to add to cart</h2>

    We use the datagrid to show the shopping basket items.

    Dragging the cloned product:
    1. $('.item').draggable({
    2. revert:true,
    3. proxy:'clone',
    4. onStartDrag:function(){
    5. $(this).draggable('options').cursor = 'not-allowed';
    6. $(this).draggable('proxy').css('z-index',10);
    7. },
    8. onStopDrag:function(){
    9. $(this).draggable('options').cursor='move';
    10. }
    11. });

    Notice that we set the draggable property 'proxy' to 'clone', so the dragged element will has clone effect.

    Dropping the selected product in the cart
    1. $('.cart').droppable({
    2. onDragEnter:function(e,source){
    3. $(source).draggable('options').cursor='auto';
    4. },
    5. onDragLeave:function(e,source){
    6. $(source).draggable('options').cursor='not-allowed';
    7. },
    8. onDrop:function(e,source){
    9. var name = $(source).find('p:eq(0)').html();
    10. var price = $(source).find('p:eq(1)').html();
    11. addProduct(name, parseFloat(price.split('$')[1]));
    12. }
    13. });
    14. var data = {"total":0,"rows":[]};
    15. var totalCost = 0;
    16. function addProduct(name,price){
    17. function add(){
    18. for(var i=0; i<data.total; i++){
    19. var row = data.rows[i];
    20. if (row.name == name){
    21. row.quantity += 1;
    22. return;
    23. }
    24. }
    25. data.total += 1;
    26. data.rows.push({
    27. name:name,
    28. quantity:1,
    29. price:price
    30. });
    31. }
    32. add();
    33. totalCost += price;
    34. $('#cartcontent').datagrid('loadData', data);
    35. $('div.cart .total').html('Total: $'+totalCost);
    36. }

    When dropping the product, we get the product name and price first, then call 'addProduct' function to update shopping basket.

    Download the EasyUI example:
    easyui-shopping-demo.zip
    1

    Отлично

    Ужасно

    Плохо

    Средне

    Хорошо

    Мнения друзей (1 чел.)

    Комментарий (0 Ответы)

    facelist doodle Граффити

    Вы должны авторизироваться, чтобы оставлять комментарии Войти | Регистрация

    Партнерка|Мобильная версия|Черный список|ПК ЗабАгро   Яндекс.Метрика

    GMT+8, 21-2-2018 01:12

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    Вернуться к началу