Web前端設計模式購物車拖拽的實現

設計場景：

ben負責的書城網使用者量不斷增加，書城書籍的型別和數量也在不斷擴大，這時候就有客戶抱怨，說書城**的購物車不夠智慧型，體現在需點選圖書項上的+號小標才能將它加入購物車，而且如果想要檢視自己的購物車內容，還需點選頁面購物車圖示跳轉到購物車內容列表去檢視，這種跳轉的效果相當糟糕，令一些老年客戶抱怨不已，因為他們記憶力不佳，經常要返回檢視自己買了什麼...

設計目標：

實現購物車智慧型化...

解決方案：

ben開始著手來解決，初步構思是建立乙個可供商品拖拽的購物車...在這樣，在原來的商品列表上只要輕輕一拖，就把商品拖進購物車，直觀，方便，關鍵是可見性好...

1、 ben先寫了三個樣式，商品列表的樣式，商品列表副本的樣式，購物車中商品列表的樣式...

商品列表樣式和商品列表副本的樣式（副本的樣式絕對定位）

.leftcontent

.bookitem /*商品列表的樣式，絕對定位*/

.bookitemmove /*商品列表副本的樣式，相對定位*/

.bookitem dl,.bookitemmove dl

.bookitem dl dt,.bookitemmove dl dt

.bookitem dl dt img,.bookitemmove dl dt img

.bookitem dl dd,.bookitemmove dl dd

購物車的樣式：

.rightcontent

.bookitemn

.bookitemn img /*刪除按鈕的樣式*/

.bookitemn dl

.bookitemn dl dt

.bookitemn dl dt img

.bookitemn dl dd

#container

下面是指令碼，具體思路是在圖書欄中的圖書項上建立副本，它的絕對定位的，位置與圖書項的位置一樣，內容也一樣，當滑鼠點選副本的時候喚醒副本，副本隨著滑鼠的移動而移動

如果滑鼠移入購物車範圍內並點選釋放水滑鼠左鍵的時候，就會追加副本的內容到購物車，副本回到原來位置；如過不在購物車範圍內，則副本返回原來位置，不執行任何操作...

**如下：

//遍歷書架，為每個圖書項（.bookitem）建立副本
var itemnum=$(".bookitem").length;
var itembook=$(".bookitem");            
for(var i=0;i < itemnum ; i++));}
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))   
$(document).mousemove(function(e));
if(e.clientx > carleft && e.clientx < cartright && e.clienty > carttop && e.clienty < cartbottom)//這一段很重要，判斷移動專案是否在購物車的熱點區域內，如果在，areastatu設定為true，加上邊框
); } 
else ); areastatu=false;}     
}})     
vernier=100;//設立游標，為購物車新增的項設立id
$(document).mouseup(function());         
if(areastatu)//判斷移動專案是否在購物車的熱點區域內
}   
carleft=cartposition.left;    
carttop=cartposition.top;
cartright=carleft+$(".rightcontent").width();
cartbottom=carttop+$(".rightcontent").height();
})       
function lala(idobj)//根據游標的值來刪除購物車內的相應項...

最終效果：

設計小結：

實際專案中購物車的數量超過6條是呈列表顯示狀態，這邊就不弄了，**比較粗糙，主要是介紹一種思路，這是我在做自己專案中的總結，希望有更好的辦法...

Web前端設計模式購物車拖拽的實現

購物車設計

購物車設計的總結

秒殺時購物車設計

Web前端設計模式 購物車拖拽的實現

購物車設計

購物車設計的總結

秒殺時購物車設計

相關推薦

Web前端設計模式購物車拖拽的實現