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


    设计场景:

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

     

    设计目标:

              实现购物车智能化...

     

    解决方案:

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

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

                

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

    .leftContent 
    {
    	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  /*商品列表的样式,绝对定位*/
    {
      180px;
      height:125px;	
      float:left; overflow:hidden;
      margin-right:20px;
      margin-bottom:20px;
      cursor:move;
    }
     
     .BookItemMove /*商品列表副本的样式,相对定位*/
    {
      180px;
      height:125px;	
      float:left; overflow:hidden;
      margin-right:20px;
      margin-bottom:20px;
      position:absolute;
      background-color:White;
    }
    
    .BookItem dl,.BookItemMove dl 
    {
      float:left; 180px; height:125px; float:left; overflow:hidden;
    }
    .BookItem dl dt,.BookItemMove dl dt
    {
    	float:left; height:120px; 80px; margin-right:12px;
    }
    
    .BookItem dl dt img,.BookItemMove dl dt img
    { 
    	80px; height:120px;
    }
    
    .BookItem dl dd,.BookItemMove dl dd
    {
        height:120px;  line-height:1.8em; font-size:12px; text-decoration:underline; 
    }
    

     购物车的样式:

    .rightContent
    {
        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
    {
      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; 180px; height:125px; overflow:hidden;padding:0px; margin-left:8px; margin-top:0px;
    }
    .BookItemN dl dt
    {
    	float:left; height:120px; 80px; margin-right:12px;
    }
    
    .BookItemN dl dt img
    { 
    	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条是呈列表显示状态,这边就不弄了,代码比较粗糙,主要是介绍一种思路,这是我在做自己项目中的总结,希望有更好的办法...

     

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

  • 相关阅读:
    hadoop 安装详解【包括jdk配置】
    vite入门与原理
    Unity Playable动画系统取代蜘蛛网Animator
    Webpack打包优化(2)
    Webpack打包优化(1)
    Array
    14 Koa 特点—async/await
    Webpack打包优化(3)
    16 Koa路由进阶配置
    13 Koa中间件
  • 原文地址:https://www.cnblogs.com/wzh2010/p/1890748.html
Copyright © 2020-2023  润新知