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

设计场景:

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

 

设计目标:

          实现购物车智能化...

 

解决方案:

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

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

            

 商品列表样式和商品列表副本的样式(副本的样式绝对定位)       

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
.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:120pxline-height:1.8em; font-size:12px; text-decoration:underline;
}

 

 购物车的样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
.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:120pxline-height:1.8em; font-size:12px; text-decoration:underline;
}
 
#container
{
  margin-top:66px
}

 

下面是脚本,具体思路是在图书栏中的图书项上建立副本,它的绝对定位的,位置与图书项的位置一样,内容也一样,当鼠标点击副本的时候唤醒副本,副本随着鼠标的移动而移动

如果鼠标移入购物车范围内并点击释放水鼠标左键的时候,就会追加副本的内容到购物车,副本回到原来位置;如过不在购物车范围内,则副本返回原来位置,不执行任何操作...

代码如下:

 

最终效果:

 

 

 

 

设计小结:

          实际项目中购物车的数量超过6条是呈列表显示状态,这边就不弄了,代码比较粗糙,主要是介绍一种思路,这是我在做自己项目中的总结,希望有更好的办法...

 

源码下载:(https://files.cnblogs.com/wzh2010/Drag.rar

posted @   Hello-Brand  阅读(1891)  评论(2编辑  收藏  举报
编辑推荐:
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
点击右上角即可分享
微信分享提示