拖拽功能
<!DOCTYPE>
<html>
<head>
<meta content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style>
li{ list-style:none; width:100px; height:30px; background:yellow; margin:10px;}
#div1{ width:100px; height:100px; background:red; margin:200px;}
</style>
<script>
window.onload = function(){var aLi = document.getElementsByTagName('li');var oDiv = document.getElementById('div1');var i = 0;//拖拽元素for(var i=0;i<aLi.length;i++){aLi[i].ondragstart = function(){//ondragstart拖拽前觸發(fā)this.style.background = 'green';};aLi[i].ondrag = function(){ //ondrag開始與結(jié)束連續(xù)觸發(fā)document.title = i++;};aLi[i].ondragend = function(){//ondragend拖拽結(jié)束后觸發(fā)this.style.background = 'yellow';};}//目標(biāo)元素oDiv.ondragenter = function(){//拖拽元素進(jìn)入目標(biāo)元素(移入)this.style.background = 'blue';};oDiv.ondragover = function(ev){//enter和leave之間連續(xù)觸發(fā)//document.title = i++;
ev.preventDefault();};oDiv.ondragleave = function(){//拖拽元素離開目標(biāo)元素(移出)this.style.background = 'red';};oDiv.ondrop = function(){//在目標(biāo)元素上釋放元素,要想觸發(fā)drop事件，就 必須在dragover當(dāng)中阻止默認(rèn)事件alert(123);};};
</script>
</head><body>
<ul><li draggable="true">a</li><li draggable="true">b</li><li draggable="true">c</li>
</ul>
<div id="div1"></div>
</body>
</html>
解決火狐下的拖拽問題
必須設(shè)置dataTransfer對(duì)象的setData方法才可以拖拽除圖片外的其他標(biāo)簽
dataTransfer下的屬性
window.onload = function(){var oUl = document.getElementsByTagName('ul')[0];var aLi = oUl.getElementsByTagName('li');var oDiv = document.getElementById('div1');var oImg = document.getElementById('img1');var i = 0;for(var i=0;i<aLi.length;i++){aLi[i].ondragstart = function(ev){var ev = ev || window.event; ev.dataTransfer.setData('name','hello');//設(shè)置光標(biāo)樣式 copy link copylink conpyMove ev.dataTransfer.effectAllowed = 'link';//設(shè)置當(dāng)前拖拽樣式ev.dataTransfer.setDragImage(oImg,0,0);};aLi[i].ondragend = function(){this.style.background = 'yellow';};}oDiv.ondragenter = function(){this.style.background = 'blue';};oDiv.ondragover = function(ev){ev.preventDefault();};oDiv.ondragleave = function(){this.style.background = 'red';};oDiv.ondrop = function(ev){}; };?files
<!DOCTYPE> <html> <head> <meta content="text/html; charset=utf-8" /> <title>無標(biāo)題文檔</title> <style>#div1{ width:200px; height:200px; background:red; margin:100px;} </style> <script> window.onload = function(){var oDiv = document.getElementById('div1');var oUl = document.getElementById('ul1');oDiv.ondragenter = function(){this.innerHTML = '可以釋放啦';};oDiv.ondragover = function(ev){ev.preventDefault();};oDiv.ondragleave = function(){this.innerHTML = '將文件拖拽到此區(qū)域';};oDiv.ondrop = function(ev){ev.preventDefault();var fs = ev.dataTransfer.files;//alert(fs.length);//alert( fs[0].type );for(var i=0;i<fs.length;i++){if(fs[i].type.indexOf('image')!=-1){//文件對(duì)象var fd = new FileReader();//讀取文件信息 fd.readAsDataURL( fs[i] );//文件讀取成功fd.onload = function(){var oLi = document.createElement('li');var oImg = document.createElement('img');//this.result讀取文件數(shù)據(jù)oImg.src = this.result;oLi.appendChild(oImg);oUl.appendChild(oLi);};}else{alert('親，請(qǐng)上傳圖片類型');}}}; }; </script> </head> <body> <div id="div1">將文件拖拽到此區(qū)域</div> <ul id="ul1"> </ul> </body> </html>?
<!DOCTYPE> <html> <head> <meta content="text/html; charset=utf-8" /> <title>無標(biāo)題文檔</title> <style> *{ margin:0; padding:0;} li{ list-style:none;} li{ float:left; width:200px; border:1px #000 solid; margin:10px;} li img{ width:200px;} p{ height:20px; border-bottom:1px #333 dashed;} #div1{ width:600px; border:1px #000 solid; height:300px; clear:both;} .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 iNum = 0;var allMoney = null;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="img1.jpg" /><p>javascript語言精粹</p><p>40￥</p></li><li draggable="true"><img src="img2.jpg" /><p>javascript權(quán)威指南</p><p>120￥</p></li><li draggable="true"><img src="img3.jpg" /><p>精通javascript</p><p>35￥</p></li><li draggable="true"><img src="img4.jpg" /><p>DOM編程藝術(shù)</p><p>45￥</p></li> </ul> <div id="div1"><!--<p><span class="box1">1</span><span class="box2">DOM編程藝術(shù)</span><span class="box3">45￥</span></p><p><span class="box1">1</span><span class="box2">DOM編程藝術(shù)</span><span class="box3">45￥</span></p><div id="allMoney">90￥</div>--> </div> </body> </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/yanwen2015/p/4947346.html
總結(jié)
- 上一篇： 骑马与砍杀作弊秘籍大全及秘籍使用方法详解
- 下一篇： 《魔兽世界怀旧服》海潮的诅咒任务怎么做