jquery问题!!!
为什么商品2拖动不了啊?另外使用了jquery.lightbox-0.4.css lightbox显示的图片效果还是不好,图片太小。
其中head是一下代码:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>购物车</title>
<style type="text/css">
.products{
margin:auto;
text-align:center;
height:200px;
margin-left:2px;
margin-top:2px;
}
#productscart,p ,a{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
}
p span
{
color:#0F0;
}
img{
width:170px;
height:128px;
}
#p1{
margin:auto;
text-align:center;
height:150px;
width:170px;
z-index:1;
}
#p2,#p3,#p4,#p5,#p6,#p7 {
width:28%;
float:left;
margin-top:5px;
z-index:3px;
position: relative;
}
.price,.quantity{
color:#F00;}
#container {
float:right;
top:60px;
width:150px;
padding-right:1px;
z-index:2;
}
#container #p{
background-color:#CF6;
color:#F00;
}
#productscart a{
float:right;
}
.droppable-active {
background-color:#bbb;
}
.droppable-hover {
outline: 1px dotted black;
background-color: #fcaf3e;
border-color: #f57900;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery-1.2.4a.js"></script>
<script type="text/javascript" src="ui.base.min.js"></script>
<script type="text/javascript" src="ui.draggable.min.js"></script>
<script type="text/javascript" src="ui.droppable.min.js"></script>
<script type="text/javascript" src="jquery.effects.core.js"></script>
<script type="text/javascript" src="jquery.effects.pulsate.js"></script>
<script type="text/javascript" src="jquery.effects.shake.js"></script>
<script type="text/javascript" src="jquery.effects.transfer.js"></script>
<script type="text/javascript" src="jquery.lightbox-0.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.lightbox-0.4.css" media="screen" />
<script type="text/javascript">
$(function(){
$(".products a").lightBox();
var priceToal=0;
$(".products:gt(0)").draggable({
cursor:"move",
helper:"clone",
opacity:0.5
});
$("#p1").draggable({revert:true});
$("#container").droppable({
accept:".products",
activeClass:"droppable-active",
hoverClass:"droppable-hover ",
drop:function(e,ui)
{
var productid= $(ui.draggable).attr("id");
productname=$("p:first",ui.draggable).text();
productprice=parseFloat( $("span",ui.draggable).text());
priceToal+=productprice;
$("#container").children().children("#cartTotal").text(priceToal);
if($("#"+productid+"cart").length==1)
{
quantity= parseInt($("#"+productid+"cart").children(".quantity").text())+1;
$("#"+productid+"cart").find(".quantity").text( quantity);
}
else
{
productitem="<div id='"+productid+"cart' >商品:"+productname+"<br>数量: <span class='quantity'> 1 </span>";
productitem+= " <a href='#'>移除</a><br>价格:<span class='price'>"+productprice+" </span></div>";
$("#productscart").append(productitem).find("a").bind("click",function()
{
num=parseInt($(this).parent().find(".quantity").text())*parseFloat( $(this).parent().find(".price").text());
priceToal=priceToal-num;
$("#container").children().children("#cartTotal").text(priceToal);
$(this).parent().remove();
});
}
}
})
})
</script>
</head>