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 : 120px ; line-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 : 120px ; line-height : 1.8em ; font-size : 12px ; text-decoration : underline ; } #container { margin-top : 66px ; } |
下面是脚本,具体思路是在图书栏中的图书项上建立副本,它的绝对定位的,位置与图书项的位置一样,内容也一样,当鼠标点击副本的时候唤醒副本,副本随着鼠标的移动而移动
如果鼠标移入购物车范围内并点击释放水鼠标左键的时候,就会追加副本的内容到购物车,副本回到原来位置;如过不在购物车范围内,则副本返回原来位置,不执行任何操作...
代码如下:
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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | //遍历书架,为每个图书项(.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条是呈列表显示状态,这边就不弄了,代码比较粗糙,主要是介绍一种思路,这是我在做自己项目中的总结,希望有更好的办法...
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)