购物车
<title>Shopping cart</title>
<link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
<style>
.remove{
margin-left:60px;
}
</style>
<script src="js/jquery-1.3.2.min.js"></script>
<script>
$(function(){
$("a[class!='remove']").click(function(){
//获取当前点击a标签对应的商品名称
var name=$(this).parent().find("h2").text();
//获取当前点击a标签对应的商品价格
var price=$(this).prev().find("span").text();
addproduct(name,price);
})
})
///添加商品
function addproduct(proname,price)
{
//判断当前订购的商品是否已经在购物车中
var pros=$("#cartProducts>div");
var flag=false;
//each：遍历集合
pros.each(function(){
if($(this).children().eq(0).text()==proname)
{
flag=true;
//获取原有数量
var num=$(this).find(".num").text();
$(this).find(".num").text(parseInt(num)+1);
}
})
/*for(var i=0;i<pros.length;i++)
{
if(pros.eq(i).children().eq(0).text()==proname)
{
flag=true;
//获取原有数量
var num=pros.eq(i).find(".num").text();
pros.eq(i).find(".num").text(parseInt(num)+1);
break;
}
}*/
if(!flag)
{
var html="<div><span>"+proname+"</span><br/>数量：<span class='num'>1</span><br/><span>"+price+"</span><a href='#' onclick='javascript:del(this)' class='remove'>remove</a></div>";
$("#cartProducts").append(html);
}
}
function del(obj)
{
$(obj).parent().remove();
}
</script>
</head>
<body>
<div id="cart" class="cart">
<h3>我的购物车</h3>
<div id="cartProducts"></div>
<p><strong>总价: <span id="cartTotal">0</span> ￥</strong></p>
</div>
<h1>可以直接拖动产品到购物车</h1>
<div id="products">
<div id="product1" class="product">
<img src="images/1.jpg" alt=""/>
<h2>Nike男式休闲鞋</h2>
<p>型号：40码</p>
<p><strong>单价: <span>499.35</span> ￥</strong></p>
<a href="#">添加到购物车</a>
</div>
<div id="product2" class="product">
<img src="images/2.jpg" />
<h2>Nike女式篮球鞋</h2>
<p>型号：37码</p>
<p><strong>单价: <span>325.95</span> ￥</strong></p>
<a href="#">添加到购物车</a>
</div>
<div id="product3" class="product">
<img src="images/3.jpg"/>
<h2>Nike男式篮球鞋</h2>
<p>型号：42码</p>
<p><strong>单价: <span>423.00</span> ￥</strong></p>
<a href="#">添加到购物车</a>
</div>
<div id="product4" class="product">
<img src="images/4.jpg"/>
<h2>波司登男式羽绒服</h2>
<p>型号：XXXL</p>
<p><strong>单价: <span>349.95</span> ￥</strong></p>
<a href="#">添加到购物车</a>
</div>
<div id="product5" class="product">
<img src="images/5.jpg"/>
<h2>波司登女式羽绒服</h2>
<p>型号：ML</p>
<p><strong>单价: <span>287.00</span> ￥</strong></p>
<a href="#">添加到购物车</a>
</div>
<div id="product6" class="product">
<img src="images/6.jpg" />
<h2>精品茶壶</h2>
<p>型号：大号</p>
<p><strong>单价: <span>149.80</span> ￥</strong></p>
<a href="#">添加到购物车</a>
</div>
</div>
</body>
</html>
我这个项目 有高手可以帮我实现一下那个直接将 商品拖到那个购物车里面不。然后信息也会改变 就是拖着往里面一扔
[解决办法]
看下，可以拖商品到物里
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery-ui-personalized-1.6rc4.min.js"></script>
<style type="text/css">
.productItemStyle
{
margin:20 20 20 20;
background-color:Blue;
font-weight:bold;
padding:1em 1em 1em 1em;
border:solid 2px black;
z-index:99999;
}
.dropZone
{
background-color:#66FF66;
height:300px;
width:300px;
position:relative;
overflow:auto;
}
li
{
list-style-type:none;
}
.dropHover
{
border:dashed 3px green;
}
.droppedItemStyle
{
background-color:Blue;
font-weight:bold;
border:solid 2px black;
z-index:99999;
}
.dropZoneContainer
{
top:100px;
left:600px;
height:400px;
width:300px;
position:absolute;
}
.dropZoneHeader
{
background:black;
color:White;
text-align:center;
font-weight:bold;
}
.shoppingCartTotal
{
font-size:30px;
color:Black;
font-family:Verdana;
background-color:Lime;
}
.deleteLink
{
color:White;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataList ID="dlProducts" RepeatColumns="3" RepeatDirection="Horizontal" runat="server">
<ItemTemplate>
<div class="productItemStyle" price='<%# Eval("Price") %>' code='<%# Eval("Code") %>' id='item_<%# Container.ItemIndex + 1 %>'>
<li>
<%# Eval("Code") %>
</li>
<li>
<%# Eval("Name") %>
</li>
<li>
<%# Eval("Description") %>
</li>
<li>
$<%# Eval("Price") %>
</li>
</div>
</ItemTemplate>
</asp:DataList>
<div class="dropZoneContainer">
<div class="dropZoneHeader">Shopping Basket</div>
<div class="dropZone">
</div>
<div class="shoppingCartTotal">Total: <span id="total">0.00</span>
</div>
</div>
</div>
<input type="button" value="List Selected Items" onclick="listSelectedItems()" />
</form>
</body>
</html>
<script type="text/javascript">
var total = 0;
$(document).ready(function() {
$(".productItemStyle").draggable({ helper: "clone", opacity: "0.5" });
$(".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);
}
}
);
});
// format the code and remove junky stuff!
function getFormattedPrice(unformattedPrice) {
return unformattedPrice.replace(/[\n\r\t$/\s/g]/g, '');
}
// update the total!
function updateTotal(price) {
total += parseFloat(price);
$("#total").html(total.toFixed(2));
$(".shoppingCartTotal").effect("bounce");
}
function listSelectedItems()
{
var itemsInShoppingCart = $(".dropZone div");
for(i=0;i<=itemsInShoppingCart.length-1;i++)
{
alert(itemsInShoppingCart[i].attributes["code"].nodeValue);
alert(itemsInShoppingCart[i].attributes["price"].nodeValue);
}
}
</script>