html5 拖放到购物车 

<!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>

 

posted @ 2015-02-10 19:48  mayufo  阅读(251)  评论(0)    收藏  举报