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）