Web前端设计模式--购物车拖拽的实现...

设计场景：

Ben负责的书城网用户量不断增加，书城书籍的类型和数量也在不断扩大，这时候就有客户抱怨，说书城网站的购物车不够智能，体现在需点击图书项上的+号小标才能将它加入购物车，而且如果想要查看自己的购物车内容，还需点击页面购物车图标跳转到购物车内容列表去查看，这种跳转的效果相当糟糕，令一些老年客户抱怨不已，因为他们记忆力不佳，经常要返回查看自己买了什么...

设计目标：

实现购物车智能化...

解决方案：

Ben开始着手来解决，初步构思是建立一个可供商品拖拽的购物车...在这样，在原来的商品列表上只要轻轻一拖，就把商品拖进购物车，直观，方便，关键是可见性好...

1、 Ben先写了三个样式，商品列表的样式，商品列表副本的样式，购物车中商品列表的样式...

商品列表样式和商品列表副本的样式（副本的样式绝对定位）

 购物车的样式：[/b]

.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条是呈列表显示状态，这边就不弄了，代码比较粗糙，主要是介绍一种思路，这是我在做自己项目中的总结，希望有更好的办法...

源码下载：（http://files.cnblogs.com/wzh2010/Drag.rar）