为什么商品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>
其中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>
<hr color="#FF0000" /><div id="container" >
<p id="p" >您的购物车 </p>
<div id="productscart">
</div>
<P>
<STRONG>Total: </STRONG> ￥<SPAN id=cartTotal>0</SPAN>
</P>
</div><p align="center"> 产品展示 </p>
<div id="p1">
<img src="images/1.jpg" alt="非卖品"/>
</div><div id="p2" class="products">
<img class="imgclass" src="images/2.jpg" alt="好东西" />
<p>商品2</p>
<p><strong>Total: </strong> ￥<span>110 </span> <a href="images/05.jpg" ">查看</a></p></div><div id="p3" class="products">
<img class="imgclass" src="images/shoe1_small.jpg" alt="shoe" jqimg="images/shoe1_big.jpg" />
<p>商品3</p>
<p><strong>Total: </strong>￥<span>70 </span> <a href="images/me_big.jpg" >查看 </a> </p></div><div id="p4" class="products">
<img class="imgclass" src="images/shoe3_small.jpg" alt="好东西" jqimg="images/shoe3_big.jpg" />
<p>商品4</p>
<p><strong>Total: </strong>￥<span>200 </span> <a href="images/shoe3_big.jpg">查看 </a> </p>
</div><div id="p5" class="products">
<img class="imgclass" src="images/5.jpg" alt="好东西"/>
<p>商品5</p>
<p><strong>Total: </strong>￥<span>100 </span ><a href="images/06.jpg">查看 </a> </p>
</div><div id="p6" class="products">
<img class="imgclass" src="images/6.jpg" alt="好东西" />
<p>商品6</p>
<p><strong>Total: </strong>￥<span>150 </span> <a href="images/07.jpg">查看 </a> </p>
</div><div id="p7" class="products">
<img class="imgclass" src="images/7.bmp" alt="好东西" />
<p>商品7</p>
<p><strong>Total: </strong>￥<span>500 </span> <a href="images/7.bmp">查看 </a> </p>
</div></body>
</html>