jQuery EasyUI Drag and Drop -Создание корзины покупок с перетаскиванием

Если вы можете просто реализовать перетаскивание в своем веб-приложении, вы узнаете нечто особенное. С jQuery EasyUI мы можем просто реализовать функциональность перетаскивания в веб-приложениях.

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

Отображение товаров на странице

    <ul class="products">
        <li>
            <a href="../index.html" class="item">
                <img src="images/shirt1.gif.html"/>
                <div>
                    <p>Balloon</p>
                    <p>Price:$25</p>
                </div>
            </a>
        </li>
        <li>
            <a href="../index.html" class="item">
                <img src="images/shirt2.gif.html"/>
                <div>
                    <p>Feeling</p>
                    <p>Price:$25</p>
                </div>
            </a>
        </li>
        <!-- other products -->
    </ul>

Как видно из приведенного выше кода, мы добавляем элемент <ul>, содержащий несколько элементов <li>, для отображения товаров. Все товары имеют атрибуты name и price, которые содержатся в элементах <p>.

Создание корзины покупок

    <div class="cart">
        <h1>Shopping Cart</h1>
        <table id="cartcontent" style="width:300px;height:auto;">
            <thead>
                <tr>
                    <th field="name" width=140>Name</th>
                    <th field="quantity" width=60 align="right">Quantity</th>
                    <th field="price" width=60 align="right">Price</th>
                </tr>
            </thead>
        </table>
        <p class="total">Total: $0</p>
        <h2>Drop here to add to cart</h2>
    </div>

Мы используем таблицу данных (datagrid) для отображения товаров в корзине покупок.

Перетаскивание клонированных товаров

    $('.item').draggable({
        revert:true,
        proxy:'clone',
        onStartDrag:function(){
            $(this).draggable('options').cursor = 'not-allowed';
            $(this).draggable('proxy').css('z-index',10);
        },
        onStopDrag:function(){
            $(this).draggable('options').cursor='move';
        }
    });

Обратите внимание, что мы изменили значение атрибута draggable с 'proxy' на 'clone', поэтому перетаскиваемый элемент будет создаваться клонированием.

Перетащите выбранные товары в корзину

    $('.cart').droppable({
        onDragEnter:function(e,source){
            $(source).draggable('options').cursor='auto';
        },
        onDragLeave:function(e,source){
            $(source).draggable('options').cursor='not-allowed';
        },
        onDrop:function(e,source){
            var name = $(source).find('p:eq(0)').html();
            var price = $(source).find('p:eq(1)').html();
            addProduct(name, parseFloat(price.split('$')[1]));
        }
    });
    var data = {"total":0,"rows":[]};
    var totalCost = 0;
    function addProduct(name,price){
        function add(){
            for(var i=0; i<data.total; i++){
                var row = data.rows[i];
                if (row.name == name){
                    row.quantity += 1;
                    return;
                }
            }
            data.total += 1;
            data.rows.push({
                name:name,
                quantity:1,
                price:price
            });
        }
        add();
        totalCost += price;
        $('#cartcontent').datagrid('loadData', data);
        $('div.cart .total').html('Total: $'+totalCost);
    }    

Каждый раз, когда товар перетаскивается, мы сначала получаем название и цену товара, затем вызываем функцию 'addProduct' для обновления корзины.

Скачать примеры jQuery EasyUI

jeasyui-dd-shopping.zip