html5拖放 實現購物車
阿新 • • 發佈:2018-12-12
當每一個黑色的div被拖動到灰色div中,灰色div就追加一條黑色div的資訊。並且自動計算總金額
效果圖
程式碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/default.css" /> <title></title> <style type="text/css"> .items>div { width: 150px; height: 150px; background: #111; float: left; color: #fff; margin-right: 10px; } #shopcar { width: 500px; height: 250px; background: #ccc; margin-top: 20px; } .title, #car_items>p { display: flex; } #car_items { margin-top: 20px; } .title>p, #car_items>p span { float: left; flex: 1; text-align: center; } </style> </head> <body> <div class="items clearfix" id="items"> <div class="div1"> <p>JavaScript面向物件</p> <p>120</p> <p>深圳</p> </div> <div class="div2"> <p>HTML5祕籍</p> <p>60</p> <p>北京</p> </div> <div class="div3"> <p>HTML5動畫</p> <p>50</p> <p>杭州</p> </div> </div> <div id="shopcar"> <div class="title"> <p>序號</p> <p>書名</p> <p>價格</p> <p>地點</p> </div> <div id="car_items"> <!--<p id="p1"> <span class="name">mianxdx</span> <span class="price">129</span> <span class="address">深圳</span> </p>--> </div> </div> <div class="totle"> 總價: <span id="totleMoney"></span> </div> </body> <script src="js/jquery.js"></script> <script type="text/javascript"> function dom(id) { return document.getElementById(id); } var itemsDom = dom('items'); var carDom = dom('shopcar'); var car_itemsDom = dom('car_items'); var itemsDom_child = itemsDom.children; // console.log(itemsDom_child.length); var div = dom('items').getElementsByTagName('div'); for(var i = 0; i < div.length; i++) { div[i].index = i; div[i].onclick = function() { // alert(this.index); } } for(var i = 0; i < itemsDom_child.length; i++) { itemsDom_child[i].draggable = 'true'; itemsDom_child[i].index = i itemsDom_child[i].ondragstart = function(e) { //alert(this.index); var json = {}; var div_p = this.children; json.name = div_p[0].innerHTML; json.price = div_p[1].innerHTML; json.address = div_p[2].innerHTML; // json.id = div_p[3].innerHTML; json.id = this.index; // console.log(json); //序列化成jsonstring var jsonString = JSON.stringify(json); // e.dataTransfer.setData('text', json); // e.dataTransfer.setData('text', e.target.outerHTML); //放入到資料傳輸物件中 e.dataTransfer.setData('text', jsonString); } } carDom.ondragover = function(e) { e.preventDefault(); } carDom.ondrop = function(e) { var data = e.dataTransfer.getData('text'); var json = JSON.parse(data); // console.log(json); var txtDom = dom('txt' + json.id); if(!txtDom) { /*var span = document.createElement('span'); span.className = 'name'; span.innerHTML = data.name;*/ var html = '<p id="txt' + json.id + '">' + '<span class="name">' + json.id + '</span>' + '<span class="name">' + json.name + '</span>' + '<span class="price">' + json.price + '</span>' + '<span class="address">' + json.address + '</span>' + '</p>' car_itemsDom.innerHTML += html; } else { var spans = dom('txt' + json.id).children; var price = spans[2].innerHTML || 0; spans[2].innerHTML = price * 1 + json.price * 1; } totleMoney(); } function totleMoney() { var len = dom('car_items').children.length; var totlePrice = 0; for(var i = 0; i < len; i++) { console.log(i) var price = $('#car_items>p').eq(i).find('.price').text() || 0; totlePrice += price * 1; } // console.log(spans) dom('totleMoney').innerHTML = totlePrice; } </script> </html>