html5 拖放購物車
阿新 • • 發佈：2018-05-22
tle 事件 smon start bsp borde name == 精通
1.本例中模仿了購物車添加的功能
主要運用了ondragstart / ondragover/ ondrag 功能
功能比較簡單
遺留問題：火狐下圖片拖進會被打開
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <style> body,ul,img,p{margin:0;padding:0;} li{list-style:none;} li{float:left;width:200px;margin:10px;border:1px solid #000;height:300px;} li img{width:200px;height:250px;} p{height:20px;border-bottom:1px dashed #666;} #div1{clear:both;width:600px;height:400px;border:1px solid #000;margin:20px;} .box1{float:left;width:200px;} .box2{float:left;width:200px;} .box3{float:left;width:200px;} #allMoney{float:right;} </style> <script> window.onload = function(){ var aLi = document.getElementsByTagName(‘li‘); var oDiv = document.getElementById(‘div1‘); var obj = {}; var oMoney = null; var iNum = 0; for(var i=0;i<aLi.length;i++){ aLi[i].ondragstart= function(ev){ var ev = ev || window.event; var aP = this.getElementsByTagName(‘p‘); ev.dataTransfer.setData(‘title‘,aP[0].innerHTML); ev.dataTransfer.setData(‘money‘,aP[1].innerHTML); ev.dataTransfer.setDragImage(this,0,0); }; } oDiv.ondragover = function(ev){ var ev = ev || window.event; ev.preventDefault(); //如果想要實現drop功能 必須組織默認事件 }; oDiv.ondrop = function(ev){ var ev = ev || window.event; ev.preventDefault(); // 阻止圖片進來打開 var sTitle = ev.dataTransfer.getData(‘title‘); var sMoney = ev.dataTransfer.getData(‘money‘); if(!obj[sTitle]){ var oP = document.createElement(‘p‘); var oSpan = document.createElement(‘span‘); oSpan.className = ‘box1‘; oSpan.innerHTML = 1; oP.appendChild(oSpan); var oSpan = document.createElement(‘span‘); oSpan.className = ‘box2‘; oSpan.innerHTML = sTitle; oP.appendChild(oSpan); var oSpan = document.createElement(‘span‘); oSpan.className = ‘box3‘; oSpan.innerHTML = sMoney; oP.appendChild(oSpan); oDiv.appendChild(oP); obj[sTitle] = 1; }else{ var arrBox1 = document.getElementsByClassName(‘box1‘); var arrBox2 = document.getElementsByClassName(‘box2‘); for(var i=0;i<arrBox1.length;i++){ if(arrBox2[i].innerHTML == sTitle){ arrBox1[i].innerHTML = parseInt(arrBox1[i].innerHTML)+1; break; } } } if(!oMoney){ oMoney = document.createElement(‘div‘); oMoney.id = ‘allMoney‘; } iNum += parseInt(sMoney); oMoney.innerHTML = iNum +‘￥‘; oDiv.appendChild(oMoney); }; }; </script> </head> <body> <ul> <li draggable="true"> <img src="image/img1.jpg"/> <p>javascript語言精粹</p> <p>40￥</p> </li> <li draggable="true"> <img src="image/img2.jpg"/> <p>javascript權威指南</p> <p>120￥</p> </li> <li draggable="true"> <img src="image/img3.jpg"/> <p>精通javascript</p> <p>50￥</p> </li> <li draggable="true"> <img src="image/img4.jpg"/> <p>DOM編程藝術</p> <p>70￥</p> </li> </ul> <div id="div1"> <!-- <p> <span class="box1">1</span> <span class="box2">DOM編程藝術</span> <span class="box3">45￥</span> </p> <p> <span class="box1">1</span> <span class="box2">DOM編程藝術</span> <span class="box3">45￥</span> </p> <p> <span class="box1">1</span> <span class="box2">DOM編程藝術</span> <span class="box3">45￥</span> </p> <div id="allMoney">90￥</div>--> </div> </body> </html>
html5 拖放購物車