日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
一步步教你如何用HTML 5拖拽功能打造購物車

在***的HTML 5標(biāo)準(zhǔn)中,為***的各類瀏覽器帶來了拖拽功能。這意味著現(xiàn)在可以不通過其他框架如jQuery的輔助就能在頁面上拖拽各種元素。在本文中，將指導(dǎo)讀者認(rèn)識 HTML 5中的拖拽功能，并且使用它來打造一款基本的購物車。這個購物車很簡單，我們只往其中放置一件商品然后檢查是否已有商品了，如果已經(jīng)存在同樣的商品，則更 新其數(shù)量和價格。本文要求讀者有初步的HTML 5基礎(chǔ)知識和一定基礎(chǔ)的Javascript知識即可。

在豐林等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè) 網(wǎng)站設(shè)計制作按需求定制制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),高端網(wǎng)站設(shè)計,成都全網(wǎng)營銷,外貿(mào)網(wǎng)站建設(shè),豐林網(wǎng)站建設(shè)費用合理。

開始

首先我們需要設(shè)計購物車的基礎(chǔ)結(jié)構(gòu)和準(zhǔn)備一系列的商品。為了簡單演示使用了各類商品，這里只是使用HTML 5中的data_*屬性（可參考https://developer.mozilla.org/en-US/docs/Web/Guide/HTML /Using_data_attributes），為各個商品添加了價格。簡單來說，data_屬性是讓用戶可以為某些標(biāo)簽存儲一些額外的數(shù)據(jù)信息。代碼如下所示：

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.     
         
  
  
  
    •     
     
    3.   
  
  
  
  3.     0.00 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.     
         
  
  
  
    •         Product 1
      •    
  
  
  
    •         Product 2
      •    
  
  
  
    •         Product 3
      •    
  
  
  
    •         Product 4
      •    
  
  
  
    •         Product 5
      •    
  
  
  
    •         Product 6
      •    
  
  
  
    •         Product 7
      •    
  
  
  
    •     
     
    7.   
  
  
  
  7.  
    8.

由于本文是主要講解使用Javascript搭配HTML 5的新功能，因此不會使用大家常用的jQuery。下面編寫addEvent事件，代碼如下：

 
 
 
 
      
  
  
  
  1. function addEvent(element, event, delegate ) { 
    2.   
  
  
  
  2.     if (typeof (window.event) != 'undefined' && element.attachEvent) 
    3.   
  
  
  
  3.         element.attachEvent('on' + event, delegate); 
    4.   
  
  
  
  4.     else  
    5.   
  
  
  
  5.         element.addEventListener(event, delegate, false); 
    6.   
  
  
  
  6. } 
    7.

我們將使用的***個事件是readystatechange 。該事件在當(dāng)文檔的狀態(tài)發(fā)生改變的時候觸發(fā)，我們期望將其狀態(tài)設(shè)置為“complete”，直到附加上剩余的事件和邏輯代碼。這個跟jQuery中的.ready事件類似。代碼如下：

 
 
 
 
      
  
  
  
  1. addEvent(document, 'readystatechange', function() { 
    2.   
  
  
  
  2.     if ( document.readyState !== "complete" )  
    3.   
  
  
  
  3.         return true; 
    4.   
  
  
  
  4. }); 
    5.

對DOM查詢

在HTML 5標(biāo)準(zhǔn)中，DOM的選擇器方面也進行了更新，其中新增的功能中最有用的方法就是querySelectorAll。這個方法允許用戶使用更復(fù)雜的css樣式選擇器（有點象jQuery）去查詢頁面元素。這比舊有的通過class和ID去進行查詢簡單些。

下面是其中一個例子：

 
 
 
 
      
  
  
  
  1. var items = document.querySelectorAll("section.products ul li"); 
    2.   
  
  
  
  2. var cart = document.querySelectorAll("#cart ul")[0]; 
    3.

這里，首先是分別使用items和cart變量獲得商品列表和購物車列表，留作稍候使用。可以看到，上面通過querySelectorAll的方 法比以往更加方便了。既然已經(jīng)有了產(chǎn)品的列表，那么我們將實現(xiàn)拖拽功能并且當(dāng)產(chǎn)品被拖拽的時候，必須要有相關(guān)的事件進行監(jiān)聽。為了實現(xiàn)這個目的，將循環(huán)遍 歷商品列表并且使用setAttribute方法設(shè)置draggable屬性為true，這里并且要為每個商品都添加dragstart事件。代碼如下：

 
 
 
 
      
  
  
  
  1. for (var i = 0; i < items.length; i++) { 
    2.   
  
  
  
  2.     var item = items[i]; 
    3.   
  
  
  
  3.     item.setAttribute("draggable", "true"); 
    4.   
  
  
  
  4.     addEvent(item, 'dragstart', onDrag); 
    5.   
  
  
  
  5. }; 
    6.

在上面的代碼中，請注意將dragstart方法委托定義為onDrag。這個方法的目的是設(shè)置拖拽的選項并且保存元素的id留作稍候通過使用 dataTransfer.setData方法獲得數(shù)據(jù)。dataTransfer事件對象允許我們指定默認(rèn)的拖拽動作的效果。默認(rèn)是既復(fù)制并移動，但這 里我們強制令其為只移動元素。代碼如下：

 
 
 
 
      
  
  
  
  1. function onDrag(event){ 
    2.   
  
  
  
  2.     event.dataTransfer.effectAllowed = "move"; 
    3.   
  
  
  
  3.     event.dataTransfer.dropEffect = "move"; 
    4.   
  
  
  
  4.     var target = event.target || event.srcElement; 
    5.   
  
  
  
  5.     var success = event.dataTransfer.setData('Text', target.id); 
    6.   
  
  
  
  6. } 
    7.

#p#

設(shè)計購物車

我們先來看下設(shè)計的購物車大概是什么樣子的,如下圖：

看上去樣子不大漂亮,但這個并不影響我們的示例教學(xué)用?？梢钥吹接脩艨梢酝侠赑roduct List中的商品到上面的購物車區(qū)域中。

默認(rèn)元素是不接收drop事件的，因此為了能讓某個元素能接收到拖拽的事件消息，我們要重寫默認(rèn)的行為。為了實現(xiàn)這個目的，使用了onDragOver方法。代碼如下，所做的其實是阻止默認(rèn)的dragover和dragenter事件行為：

 
 
 
 
      
  
  
  
  1. function onDragOver(event){ 
    2.   
  
  
  
  2.     if(event.preventDefault) event.preventDefault(); 
    3.   
  
  
  
  3.     if (event.stopPropagation) event.stopPropagation(); 
    4.   
  
  
  
  4.     else event.cancelBubble = true; 
    5.   
  
  
  
  5.     return false; 
    6.   
  
  
  
  6. } 
    7.   
  
  
  
  7. addEvent(cart, 'dragover', onDragOver); 
    8.

接下來，我們要往購物車中增加商品了。只需要使用dataTransfer.getData方法從dataTransfer對象中取出id的值，有了id的值就可以從商品列表中找到商品。但要注意的是在往購物車中放商品前要檢查該商品是否已經(jīng)放置在里面了，

檢查的方法很簡單，只需要使用querySelectorAll方法就可以了，代碼如下：

 
 
 
 
      
  
  
  
  1. var exists = document.querySelectorAll("#cart ul li[data-id='" + id + "']"); 
    2.

接下來就很容易根據(jù)變量exists去判斷是否購物車中已經(jīng)存在商品，代碼如下：

 
 
 
 
      
  
  
  
  1. if(exists.length > 0){ 
    2.   
  
  
  
  2.     updateCartItem(exists[0]); 
    3.   
  
  
  
  3. } else { 
    4.   
  
  
  
  4.     addCartItem(item, id); 
    5.   
  
  
  
  5. } 
    6.

 在上面的代碼中,如果購物車中不包含任何商品,則調(diào)用下面的代碼addCartItem。

 
 
 
 
      
  
  
  
  1. function addCartItem(item, id) { 
    2.   
  
  
  
  2.     var clone = item.cloneNode(true); 
    3.   
  
  
  
  3.     clone.setAttribute('data-id', id); 
    4.   
  
  
  
  4.     clone.setAttribute('data-quantity', 1); 
    5.   
  
  
  
  5.     clone.removeAttribute('id'); 
    6.   
  
  
  
  6.      
    7.   
  
  
  
  7.     var fragment = document.createElement('span'); 
    8.   
  
  
  
  8.     fragment.setAttribute('class', 'quantity'); 
    9.   
  
  
  
  9.     fragment.innerHTML = ' x 1'; 
    10.   
  
  
  
  10.     clone.appendChild(fragment);     
    11.   
  
  
  
  11.      
    12.   
  
  
  
  12.     fragment = document.createElement('span'); 
    13.   
  
  
  
  13.     fragment.setAttribute('class', 'sub-total'); 
    14.   
  
  
  
  14.     clone.appendChild(fragment);                     
    15.   
  
  
  
  15.     cart.appendChild(clone); 
    16.   
  
  
  
  16. } 
    17.

如果購物車中不包含某件商品，則addCartItem方法中要做的事是克隆當(dāng)前的商品項?，F(xiàn)在可以指定的data-*的值。首先在克隆后的結(jié)點中，設(shè)置的是data-id結(jié)點，然后設(shè)置data-quantity屬性為1并移除id屬性（id屬性在頁面中是唯一的）。然后我們增加兩個新的span到列表項中，這是用來顯示小計項和產(chǎn)品的數(shù)量的。下圖是從商品列表中拖拉到購物車中的情景：

更新購物車中的商品

如果一個商品已經(jīng)在購物車中存在了，我們將要增加其數(shù)量，其中我們顯示給用戶的方式是單價*數(shù)量，因此，我們使用 getAttribute方法就可以獲得當(dāng)前的數(shù)量并且對其進行增加的操作，代碼如下：

 
 
 
 
      
  
  
  
  1. function updateCartItem(item){ 
    2.   
  
  
  
  2.     var quantity = item.getAttribute('data-quantity'); 
    3.   
  
  
  
  3.     quantity = parseInt(quantity) + 1 
    4.   
  
  
  
  4.     item.setAttribute('data-quantity', quantity); 
    5.   
  
  
  
  5.     var span = item.querySelectorAll('span.quantity'); 
    6.   
  
  
  
  6.     span[0].innerHTML = ' x ' + quantity; 
    7.   
  
  
  
  7. } 
    8.

#p#

更新總價格

一旦購物車的商品數(shù)量增加了，我們就要重新計算總價格。這里我們再次使用了

querySelectorAll功能。我們只需要遍歷購物車中的每一個商品并重新計算價格就可以了，這里是取了兩位小數(shù)位。

 
 
 
 
      
  
  
  
  1. function updateCart(){ 
    2.   
  
  
  
  2.     var total = 0.0; 
    3.   
  
  
  
  3.     var cart_items = document.querySelectorAll("#cart ul li") 
    4.   
  
  
  
  4.     for (var i = 0; i < cart_items.length; i++) { 
    5.   
  
  
  
  5.         var cart_item = cart_items[i]; 
    6.   
  
  
  
  6.         var quantity = cart_item.getAttribute('data-quantity'); 
    7.   
  
  
  
  7.         var price = cart_item.getAttribute('data-price'); 
    8.   
  
  
  
  8.          
    9.   
  
  
  
  9.         var sub_total = parseFloat(quantity * parseFloat(price)); 
    10.   
  
  
  
  10.         cart_item.querySelectorAll("span.sub-total")[0].innerHTML = " = " + sub_total.toFixed(2); 
    11.   
  
  
  
  11.          
    12.   
  
  
  
  12.         total += sub_total; 
    13.   
  
  
  
  13.     } 
    14.   
  
  
  
  14.      
    15.   
  
  
  
  15.     document.querySelectorAll("#cart span.total")[0].innerHTML = total.toFixed(2); 
    16.

從下圖中可以看到當(dāng)拖拽多個商品到購物車中，商品的總價格是會增加的：

***我們總體看下所有的Javascript代碼如下所示。

 
 
 
 
      
  
  
  
  1. function addEvent(element, event, delegate ) { 
    2.   
  
  
  
  2.     if (typeof (window.event) != 'undefined') 
    3.   
  
  
  
  3.         element.attachEvent('on' + event, delegate); 
    4.   
  
  
  
  4.     else  
    5.   
  
  
  
  5.        element.addEventListener(event, delegate, false); 
    6.   
  
  
  
  6. } 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8. addEvent(document, 'readystatechange', function() { 
    9.   
  
  
  
  9.     if ( document.readyState !== "complete" )  
    10.   
  
  
  
  10.         return true; 
    11.   
  
  
  
  11.          
    12.   
  
  
  
  12.     var items = document.querySelectorAll("section.products ul li"); 
    13.   
  
  
  
  13.     var cart = document.querySelectorAll("#cart ul")[0]; 
    14.   
  
  
  
  14.      
    15.   
  
  
  
  15.     function updateCart(){ 
    16.   
  
  
  
  16.         var total = 0.0; 
    17.   
  
  
  
  17.         var cart_items = document.querySelectorAll("#cart ul li") 
    18.   
  
  
  
  18.         for (var i = 0; i < cart_items.length; i++) { 
    19.   
  
  
  
  19.             var cart_item = cart_items[i]; 
    20.   
  
  
  
  20.             var quantity = cart_item.getAttribute('data-quantity'); 
    21.   
  
  
  
  21.             var price = cart_item.getAttribute('data-price'); 
    22.   
  
  
  
  22.              
    23.   
  
  
  
  23.             var sub_total = parseFloat(quantity * parseFloat(price)); 
    24.   
  
  
  
  24.             cart_item.querySelectorAll("span.sub-total")[0].innerHTML = " = " + sub_total.toFixed(2); 
    25.   
  
  
  
  25.              
    26.   
  
  
  
  26.             total += sub_total; 
    27.   
  
  
  
  27.         } 
    28.   
  
  
  
  28.          
    29.   
  
  
  
  29.         document.querySelectorAll("#cart span.total")[0].innerHTML = total.toFixed(2); 
    30.   
  
  
  
  30.     } 
    31.   
  
  
  
  31.      
    32.   
  
  
  
  32.     function addCartItem(item, id) { 
    33.   
  
  
  
  33.         var clone = item.cloneNode(true); 
    34.   
  
  
  
  34.         clone.setAttribute('data-id', id); 
    35.   
  
  
  
  35.         clone.setAttribute('data-quantity', 1); 
    36.   
  
  
  
  36.         clone.removeAttribute('id'); 
    37.   
  
  
  
  37.          
    38.   
  
  
  
  38.         var fragment = document.createElement('span'); 
    39.   
  
  
  
  39.         fragment.setAttribute('class', 'quantity'); 
    40.   
  
  
  
  40.         fragment.innerHTML = ' x 1'; 
    41.   
  
  
  
  41.         clone.appendChild(fragment);     
    42.   
  
  
  
  42.          
    43.   
  
  
  
  43.         fragment = document.createElement('span'); 
    44.   
  
  
  
  44.         fragment.setAttribute('class', 'sub-total'); 
    45.   
  
  
  
  45.         clone.appendChild(fragment);                     
    46.   
  
  
  
  46.         cart.appendChild(clone); 
    47.   
  
  
  
  47.     } 
    48.   
  
  
  
  48.      
    49.   
  
  
  
  49.     function updateCartItem(item){ 
    50.   
  
  
  
  50.         var quantity = item.getAttribute('data-quantity'); 
    51.   
  
  
  
  51.         quantity = parseInt(quantity) + 1 
    52.   
  
  
  
  52.         item.setAttribute('data-quantity', quantity); 
    53.   
  
  
  
  53.         var span = item.querySelectorAll('span.quantity'); 
    54.   
  
  
  
  54.         span[0].innerHTML = ' x ' + quantity; 
    55.   
  
  
  
  55.     } 
    56.   
  
  
  
  56.      
    57.   
  
  
  
  57.     function onDrop(event){             
    58.   
  
  
  
  58.         if(event.preventDefault) event.preventDefault(); 
    59.   
  
  
  
  59.         if (event.stopPropagation) event.stopPropagation(); 
    60.   
  
  
  
  60.         else event.cancelBubble = true; 
    61.   
  
  
  
  61.          
    62.   
  
  
  
  62.         var id = event.dataTransfer.getData("Text"); 
    63.   
  
  
  
  63.         var item = document.getElementById(id);             
    64.   
  
  
  
  64.                      
    65.   
  
  
  
  65.         var exists = document.querySelectorAll("#cart ul li[data-id='" + id + "']"); 
    66.   
  
  
  
  66.          
    67.   
  
  
  
  67.         if(exists.length > 0){ 
    68.   
  
  
  
  68.             updateCartItem(exists[0]); 
    69.   
  
  
  
  69.         } else { 
    70.   
  
  
  
  70.             addCartItem(item, id); 
    71.   
  
  
  
  71.         } 
    72.   
  
  
  
  72.          
    73.   
  
  
  
  73.         updateCart(); 
    74.   
  
  
  
  74.          
    75.   
  
  
  
  75.         return false; 
    76.   
  
  
  
  76.     } 
    77.   
  
  
  
  77.      
    78.   
  
  
  
  78.     function onDragOver(event){ 
    79.   
  
  
  
  79.         if(event.preventDefault) event.preventDefault(); 
    80.   
  
  
  
  80.         if (event.stopPropagation) event.stopPropagation(); 
    81.   
  
  
  
  81.         else event.cancelBubble = true; 
    82.   
  
  
  
  82.         return false; 
    83.   
  
  
  
  83.     } 
    84.   
  
  
  
  84.  
    85.   
  
  
  
  85.     addEvent(cart, 'drop', onDrop); 
    86.   
  
  
  
  86.     addEvent(cart, 'dragover', onDragOver); 
    87.   
  
  
  
  87.      
    88.   
  
  
  
  88.     function onDrag(event){ 
    89.   
  
  
  
  89.         event.dataTransfer.effectAllowed = "move"; 
    90.   
  
  
  
  90.         event.dataTransfer.dropEffect = "move"; 
    91.   
  
  
  
  91.         var target = event.target || event.srcElement; 
    92.   
  
  
  
  92.         var success = event.dataTransfer.setData('Text', target.id); 
    93.   
  
  
  
  93.     } 
    94.   
  
  
  
  94.          
    95.   
  
  
  
  95.      
    96.   
  
  
  
  96.     for (var i = 0; i < items.length; i++) { 
    97.   
  
  
  
  97.         var item = items[i]; 
    98.   
  
  
  
  98.         item.setAttribute("draggable", "true"); 
    99.   
  
  
  
  99.         addEvent(item, 'dragstart', onDrag); 
    100.   
  
  
  
  100.     }; 
    101.   
  
  
  
  101. }); 
    102.

本文的demo可以在http://developerdrive.developerdrive.netdna-cdn.com/wp-content/uploads/2013/09/cart.html中看到，

完整代碼可以在http://developerdrive.developerdrive.netdna-cdn.com/wp-content/uploads/2013/09/cart.zip中獲得下載。


網(wǎng)站名稱：一步步教你如何用HTML 5拖拽功能打造購物車
地址分享：http://www.dlmjj.cn/article/dphsgjg.html