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

核心提示： productItemStyle 样式名称Container.ItemIndex动态生成连续的商品编号4、 生成Products Div Draggable下载最新的Jquery JS文件及其UI文件：<scriptlanguage="javascript"type=&

productItemStyle 样式名称

Container.ItemIndex动态生成连续的商品编号

　

4、　 生成Products Div Draggable

下载最新的Jquery JS文件及其UI文件：

<script　language="javascript"　type="text/javascript"　src="jquery-1.2.6.min.js"></script>
<script　language="javascript"　type="text/javascript"
src="jquery-ui-personalized-1.6rc4.min.js"></script>

页面初始化时生成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

出处：http://www.cnblogs.com/ywqu