拖拽事件_5之加入购物车

*{margin:0;padding: 0;}
ul{
    margin:50px;
    overflow: hidden;
}
li{
    list-style: none;
    float: left;
    width: 200px;
    border: 1px solid red;
}
p{
    text-align: center;
    height: 30px;
    border-bottom: 1px dotted #ccc;
}
.box1,.box2,.box3{
    float: left;
    width: 200px;
}
#div1{
    width: 600px;
    height: 280px;
    border: 1px solid #000;
    margin-left: 50px;
    margin-top: -40px;
}
#allMoney{
    float: right;
}

window.onload=function(){
   var aLi=document.getElementsByTagName("li");
   var oDiv=document.getElementById("div1");
   var obj={}; //判断oDiv中是否已经存在Li了
   var iNum=0;//接收总价格
   var allMoney=null;//判断总价格的节点是否已经存在
   for(var i=0;i<aLi.length;i++){
      aLi[i].ondragstart=function(ev){
          var ev=ev||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||event;
       ev.preventDefault();
       ev.returnValus=false;
  }

  oDiv.ondrop=function(ev){
      var ev=ev||event;
      ev.preventDefault();//阻止浏览器打开图片文件

      var  aTitle=ev.dataTransfer.getData("title");
      var  aMoney=ev.dataTransfer.getData("money");
    if(!obj[aTitle]){
        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=aTitle;
        oP.appendChild(oSpan);
        var oSpan=document.createElement("span");
        oSpan.className="box3";
        oSpan.innerHTML=aMoney;
        oP.appendChild(oSpan);

        oDiv.appendChild(oP);
        obj[aTitle]=1;
    }else{
        var aBox1=document.getElementsByClassName("box1");
        var aBox2=document.getElementsByClassName("box2");
        for(var i=0;i<aBox2.length;i++){
            if(aBox2[i].innerHTML==aTitle){
                aBox1[i].innerHTML=parseInt(aBox1[i].innerHTML)+1;
            }
        }
    }

     if(!allMoney){
         allMoney=document.createElement("div");
          allMoney.id="allMoney";
          
     }
      iNum+=parseInt(aMoney);
      allMoney.innerHTML=iNum+"$";
      oDiv.appendChild(allMoney);
  }
}

 

• 

  狗狗1

  100$

• 

  狗狗2

  200$

• 

  狗狗3

  300$