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

设计场景：

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

设计目标：

实现购物车智能化...

解决方案：

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

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

商品列表样式和商品列表副本的样式（副本的样式绝对定位）

.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; 
}

购物车的样式：

.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;  
}

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

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

代码如下：

//遍历书架，为每个图书项（.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();          
        }