1.本例中模仿了购物车添加的功能
主要运用了ondragstart / ondragover/ ondrag 功能
功能比较简单
遗留问题：火狐下图片拖进会被打开
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style> ???body,ul,img,p{margin:0;padding:0;} ???li{list-style:none;} ???li{float:left;width:200px;margin:10px;border:1px solid #000;height:300px;} ???li img{width:200px;height:250px;} ????p{height:20px;border-bottom:1px dashed #666;} ???#div1{clear:both;width:600px;height:400px;border:1px solid #000;margin:20px;} ???.box1{float:left;width:200px;} ???.box2{float:left;width:200px;} ???.box3{float:left;width:200px;} ???#allMoney{float:right;} ???</style><script> ???window.onload = function(){ ???????var aLi = document.getElementsByTagName(‘li‘); ???????var oDiv = document.getElementById(‘div1‘); ???????var obj = {}; ???????var oMoney = null; ???????var iNum = 0; ???????for(var i=0;i<aLi.length;i++){ ???????????aLi[i].ondragstart = function(ev){ ???????????????var ev = ev || window.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 || window.event; ???????????ev.preventDefault(); //如果想要实现drop功能 必须组织默认事件 ???????}; ???????????????oDiv.ondrop = function(ev){ ???????????var ev = ev || window.event; ???????????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 arrBox1 = document.getElementsByClassName(‘box1‘); ???????????????var arrBox2 = document.getElementsByClassName(‘box2‘); ???????????????????????????????for(var i=0;i<arrBox1.length;i++){ ???????????????????if(arrBox2[i].innerHTML == sTitle){ ???????????????????????arrBox1[i].innerHTML = parseInt(arrBox1[i].innerHTML)+1; ???????????????????????????????????????????????break; ???????????????????} ???????????????} ???????????} ???????????????????????if(!oMoney){ ???????????????oMoney = document.createElement(‘div‘); ???????????????oMoney.id = ‘allMoney‘; ????????????????????????????} ???????????iNum += parseInt(sMoney); ???????????oMoney.innerHTML = iNum +‘￥‘; ???????????oDiv.appendChild(oMoney); ???????}; ???????????};</script></head><body><ul> ???<li draggable="true"> ???????<img src="image/img1.jpg"/> ???????<p>javascript语言精粹</p> ???????<p>40￥</p> ???</li> ??<li draggable="true"> ???????<img src="image/img2.jpg"/> ???????<p>javascript权威指南</p> ???????<p>120￥</p> ???</li> ???<li draggable="true"> ???????<img src="image/img3.jpg"/> ???????<p>精通javascript</p> ???????<p>50￥</p> ???</li> ???<li draggable="true"> ???????<img src="image/img4.jpg"/> ???????<p>DOM编程艺术</p> ???????<p>70￥</p> ???</li></ul><div id="div1"><!-- ?<p> ???????<span class="box1">1</span> ???????<span class="box2">DOM编程艺术</span> ???????<span class="box3">45￥</span> ??</p> ??<p> ???????<span class="box1">1</span> ???????<span class="box2">DOM编程艺术</span> ???????<span class="box3">45￥</span> ??</p> ??<p> ???????<span class="box1">1</span> ???????<span class="box2">DOM编程艺术</span> ???????<span class="box3">45￥</span> ??</p> ??<div id="allMoney">90￥</div>--></div></body></html>html5 拖放购物车
原文地址：https://www.cnblogs.com/moon-yyl/p/9069464.html