首页 > web前端 > js教程 > Jquery 快速构建可拖曳的购物车DragDrop_jquery

Jquery 快速构建可拖曳的购物车DragDrop_jquery

WBOY
发布: 2016-05-16 18:40:52
原创
1463 人浏览过

这样一来,购买者只需要把自己感兴趣的商品拖曳到自己的购物车中,也可以从购物车中删除商品 同时更新购物车的总体价格和数量。
那咱们就开始实例吧,本实例并没有链接数据库读取数据来初始化Products,而是创建了一些虚拟的商品如下:
1、 创建Product实体类

复制代码 代码如下:

public class Product
{
public string Code { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public double Price { get; set; }
}
[code]
2、 构建商品List
[code]
public class Product
{
public string Code { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public double Price { get; set; }
}

3、创建DataList并绑定List
复制代码 代码如下:

RepeatDirection="Horizontal" runat="server">

code='' id='item_'>










  • $




  • private void BindData()
    {
    var products = GetProducts();
    dlProducts.DataSource = products;
    dlProducts.DataBind();
    }

    productItemStyle 样式名称
    Container.ItemIndex动态生成连续的商品编号

    4、 生成Products Div Draggable
    下载最新的Jquery JS文件及其UI文件:
    复制代码 代码如下:




    页面初始化时生成Div Draggable
    复制代码 代码如下:

    $(document).ready(function() {
    $(".productItemStyle").draggable({ helper: "clone", opacity: "0.5" });
    )};

    5、创建一个DropZone
    DropZones 是购物车区域
    复制代码 代码如下:

    $(".dropZone").droppable(
    {
    accept: ".productItemStyle",
    hoverClass: "dropHover",
    drop: function(ev, ui) {
    var droppedItem = ui.draggable.clone().addClass("droppedItemStyle");
    var productCode = droppedItem[0].attributes["code"].nodeValue;
    var productPrice =
    getFormattedPrice(droppedItem[0].attributes["price"].nodeValue);
    var removeLink = document.createElement("a");
    removeLink.innerHTML = "Remove";
    removeLink.className = "deleteLink";
    removeLink.href = "#";
    removeLink.onclick = function()
    {
    $(".dropZone").children().remove("#" + droppedItem[0].id);
    updateTotal(productPrice * (-1));
    }
    droppedItem[0].appendChild(removeLink);
    $(this).append(droppedItem);
    updateTotal(productPrice);
    }
    }
    );

    Accept参数:展示Class= “productItemStyle”的Div
    hoverClass参数:当有Product放到DropZone时的样式
    drop函数:当Product拖放到DropZone时出发的函数,此函数主要做了一个Product Item的Clone,价格的计算、添加Remove按钮以及到点击Remove按钮时所触发的事件。
    价格的计算updateTotal()函数
    复制代码 代码如下:

    // update the total!
    function updateTotal(price) {
    total += parseFloat(price);
    $("#total").html(total.toFixed(2));
    $(".shoppingCartTotal").effect("bounce");
    }

    最终效果如下图:

    英文原文地址:http://www.codeproject.com/KB/aspnet/JQueryShoppingCart.aspx
    相关标签:
    来源:php.cn
    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板