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