<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{ margin:0px; padding:0px; } img{ 300px; height:200px; margin:9px; } li{ border:1px solid #333; 320px; margin:9px; float:left; list-style-type:none; } p{ text-align:center; } #div1{ margin:0 auto; 1200px; border:1px dashed #666666; height:300px; clear:both; } .box1{ 400px; float:left; } .box2{ 400px; float:left; } .box3{ 400px; float:left; } #allMoney{ float:right; } </style> <script> window.onload = function () { var odiv = document.getElementById('div1'); var ali = document.getElementsByTagName('li'); var obj = {}; var allMoney = null; var inum = 0; for(var i = 0; i < ali.length; i++) { ali[i].ondragstart = function (ev) { 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) { ev.preventDefault(); } odiv.ondrop = function (ev) { 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 box1 = document.getElementsByClassName('box1'); var box2 = document.getElementsByClassName('box2'); for(var i = 0; i < box2.length; i++) { if(box2[i].innerHTML == stitle ) { box1[i].innerHTML = parseInt(box1[i].innerHTML) + 1; } } } if(!allMoney) { allMoney = document.createElement('div'); allMoney.id = 'allMoney'; } inum += parseInt(smoney); allMoney.innerHTML = inum + '$'; odiv.appendChild(allMoney); } } </script> </head> <body> <ul> <li draggable="true"> <img src="img/5-1.jpg"> <p>美丽地方</p> <p>1000$</p> </li> <li draggable="true"> <img src="img/5-2.jpg"> <p>美丽地方2</p> <p>2000$</p> </li> <li draggable="true"> <img src="img/5-3.jpg"> <p>美丽地方3</p> <p>3000$</p> </li> <li draggable="true"> <img src="img/5-4.jpg"> <p>美丽地方4</p> <p>4000$</p> </li> </ul> <div id="div1"> </div> </body> </html>