<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
margin:0px;
padding:0px;
}
img{
width:300px;
height:200px;
margin:9px;
}
li{
border:1px solid #333;
width:320px;
margin:9px;
float:left;
list-style-type:none;
}
p{
text-align:center;
}
#div1{
margin:0 auto;
width:1200px;
border:1px dashed #666666;
height:300px;
clear:both;
}
.box1{
width:400px;
float:left;
}
.box2{
width:400px;
float:left;
}
.box3{
width: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>
