Web前端设计模式--购物车拖拽的实现...
设计场景：
Ben负责的书城网用户量不断增加，书城书籍的类型和数量也在不断扩大，这时候就有客户抱怨，说书城网站的购物车不够智能，体现在需点击图书项上的+号小标才能将它加入购物车，而且如果想要查看自己的购物车内容，还需点击页面购物车图标跳转到购物车内容列表去查看，这种跳转的效果相当糟糕，令一些老年客户抱怨不已，因为他们记忆力不佳，经常要返回查看自己买了什么...
设计目标：
实现购物车智能化...
解决方案：
Ben开始着手来解决，初步构思是建立一个可供商品拖拽的购物车...在这样，在原来的商品列表上只要轻轻一拖，就把商品拖进购物车，直观，方便，关键是可见性好...
1、 Ben先写了三个样式，商品列表的样式，商品列表副本的样式，购物车中商品列表的样式...
商品列表样式和商品列表副本的样式（副本的样式绝对定位）
.leftContent
{
width:400px;
height:466px;
margin-left:56px;
padding:18px;
border-top:solid 3px #09acf7;
border-bottom:solid 3px #09acf7;
border-left:solid 1px #09acf7;
border-right:solid 1px #09acf7;
float:left;
margin-right:60px;
}
.BookItem /*商品列表的样式，绝对定位*/
{
width:180px;
height:125px;
float:left; overflow:hidden;
margin-right:20px;
margin-bottom:20px;
cursor:move;
}
.BookItemMove /*商品列表副本的样式，相对定位*/
{
width:180px;
height:125px;
float:left; overflow:hidden;
margin-right:20px;
margin-bottom:20px;
position:absolute;
background-color:White;
}
.BookItem dl,.BookItemMove dl
{
float:left; width:180px; height:125px; float:left; overflow:hidden;
}
.BookItem dl dt,.BookItemMove dl dt
{
float:left; height:120px; width:80px; margin-right:12px;
}
.BookItem dl dt img,.BookItemMove dl dt img
{
width:80px; height:120px;
}
.BookItem dl dd,.BookItemMove dl dd
{
height:120px; line-height:1.8em; font-size:12px; text-decoration:underline;
}
购物车的样式：
.rightContent
{
width:430px;
float:left;
overflow:hidden;
height:auto;
min-height:200px;
border-top:solid 3px #09acf7;
border-bottom:solid 3px #09acf7;
border-left:solid 1px #09acf7;
border-right:solid 1px #09acf7;
padding:18px;
font-size:12px;
}
.BookItemN
{
width:180px;
height:150px;
float:left; overflow:hidden;
margin-right:20px;
margin-bottom:20px;
cursor:move;
border:solid 1px #09acf7;
}
.BookItemN img /*删除按钮的样式*/
{
float:right; margin:0; padding:0; cursor:pointer; margin-right:5px; margin-top:5px;
}
.BookItemN dl
{
float:left; width:180px; height:125px; overflow:hidden;padding:0px; margin-left:8px; margin-top:0px;
}
.BookItemN dl dt
{
float:left; height:120px; width:80px; margin-right:12px;
}
.BookItemN dl dt img
{
width:80px; height:120px;
}
.BookItemN dl dd
{
height:120px; line-height:1.8em; font-size:12px; text-decoration:underline;
}
#container
{
margin-top:66px;
}
下面是脚本，具体思路是在图书栏中的图书项上建立副本，它的绝对定位的，位置与图书项的位置一样，内容也一样，当鼠标点击副本的时候唤醒副本，副本随着鼠标的移动而移动
如果鼠标移入购物车范围内并点击释放水鼠标左键的时候，就会追加副本的内容到购物车，副本回到原来位置；如过不在购物车范围内，则副本返回原来位置，不执行任何操作...
代码如下：
//遍历书架，为每个图书项（.BookItem）创建副本
var ItemNum=$(".BookItem").length;
var ItemBook=$(".BookItem");
for(var i=0;i < ItemNum ; i++)
{
var CopyItem=ItemBook.eq(i);
var left = CopyItem.offset().left;
var top = CopyItem.offset().top;
$('body').append('<div class="BookItemMove" id="'+i+'">'+CopyItem.html() +'</div>');//副本绝对定位，位置浮动在原图书项（.BookItem）的上面
$("#"+i).css({left:left,top:top});
}
var currentItem;//当前图书项的全局变量
var moveStatu=false; areaStatu=false;//moveStatu：判断是否处在移动状态；areaStatu：判断鼠标是否移入购物车范围内
var objMove= $(".BookItemMove");
var xx,yy,oriX,oriY;xx,yy,oriX,oriY//分别代表移动项移动之后的坐标值和原始的坐标值
var cartPosition=$(".rightContent").offset();//获取购物车在页面上的位置（上下左右的坐标）
var carLeft=cartPosition.left; var cartTop=cartPosition.top;
var cartRight=carLeft+$(".rightContent").width();
var cartBottom=cartTop+$(".rightContent").height();
objMove.mousedown(function(e){
moveStatu=true;//设置移动状态为true
xx=e.clientX-$(this).offset().left;//获取鼠标到移动项左坐标的距离
yy=e.clientY-$(this).offset().top; //获取鼠标到移动项顶坐标的距离
currentItem = $(this);//设置当前的图书项
currentItem.fadeTo(5,0.5);// 移动时设置半透明度
})
$(document).mousemove(function(e){
if(moveStatu)
{
var xxM=e.clientX - xx; //移动后的左坐标
var yyM=e.clientY - yy; //移动后的顶坐标
currentItem.css({left:xxM,top:yyM});
if(e.clientX > carLeft && e.clientX < cartRight && e.clientY > cartTop && e.clientY < cartBottom)//这一段很重要，判断移动项目是否在购物车的热点区域内，如果在，areaStatu设置为true，加上边框
{
areaStatu=true;
currentItem.css({border:"dashed 1px #09acf7"});
}
else { currentItem.css({border:"none"}); areaStatu=false;}
}
})
vernier=100;//设立游标，为购物车添加的项设立id
$(document).mouseup(function(){//当鼠标键释放时，见该项追加到购物车内
if(moveStatu)
{
moveStatu=false;
var id = currentItem.attr("id");
lefts = $(".BookItem").eq(id).offset().left;
tops = $(".BookItem").eq(id).offset().top;
currentItem.css({left:lefts,top:tops,border:"none"});
if(areaStatu)//判断移动项目是否在购物车的热点区域内
{
vernier=vernier+1;
var newItem ='<div class="BookItemN"><img id="'+vernier+'" src="images/close.jpg" onclick="lala('+vernier+')"/>'+currentItem.html()+'</div>';
$('.rightContent').append(newItem);
}
}
carLeft=cartPosition.left;
cartTop=cartPosition.top;
cartRight=carLeft+$(".rightContent").width();
cartBottom=cartTop+$(".rightContent").height();
})
function lala(idObj)//根据游标的值来删除购物车内的相应项...
{
$("#"+idObj).parents(".BookItemN").remove();
}
最终效果：
设计小结：
实际项目中购物车的数量超过6条是呈列表显示状态，这边就不弄了，代码比较粗糙，主要是介绍一种思路，这是我在做自己项目中的总结，希望有更好的办法...
