拖拽功能
<!DOCTYPE> <html> <head> <meta content="text/html; charset=utf-8" /> <title>无标题文档</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拖拽前触发 this.style.background = 'green'; }; aLi[i].ondrag = function(){ //ondrag开始与结束连续触发 document.title = i++; }; aLi[i].ondragend = function(){//ondragend拖拽结束后触发 this.style.background = 'yellow'; }; } //目标元素 oDiv.ondragenter = function(){//拖拽元素进入目标元素(移入) this.style.background = 'blue'; }; oDiv.ondragover = function(ev){//enter和leave之间连续触发 //document.title = i++; ev.preventDefault(); }; oDiv.ondragleave = function(){//拖拽元素离开目标元素(移出) this.style.background = 'red'; }; oDiv.ondrop = function(){//在目标元素上释放元素,要想触发drop事件，就 必须在dragover当中阻止默认事件 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>
解决火狐下的拖拽问题
必须设置dataTransfer对象的setData方法才可以拖拽除图片外的其他标签
window.onload = function(){ var oUl = document.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); var oDiv = document.getElementById('div1'); var i = 0; for(var i=0;i<aLi.length;i++){ aLi[i].index = i; aLi[i].ondragstart = function(ev){ var ev = ev || window.event; //ev.dataTransfer.setData('name','hello'); ev.dataTransfer.setData('name',this.index); this.style.background = 'green'; }; 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){ //alert( ev.dataTransfer.getData('name') ); oUl.removeChild( aLi[ev.dataTransfer.getData('name')] ); for(var i=0;i<aLi.length;i++){ aLi[i].index = i; } }; };
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'); //设置光标样式 copy link copylink conpyMove ev.dataTransfer.effectAllowed = 'link'; //设置当前拖拽样式 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>无标题文档</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 = '将文件拖拽到此区域'; }; 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){ //文件对象 var fd = new FileReader(); //读取文件信息 fd.readAsDataURL( fs[i] ); //文件读取成功 fd.onload = function(){ var oLi = document.createElement('li'); var oImg = document.createElement('img'); //this.result读取文件数据 oImg.src = this.result; oLi.appendChild(oImg); oUl.appendChild(oLi); }; } else{ alert('亲，请上传图片类型'); } } }; }; </script> </head> <body> <div id="div1">将文件拖拽到此区域</div> <ul id="ul1"> </ul> </body> </html>
<!DOCTYPE> <html> <head> <meta content="text/html; charset=utf-8" /> <title>无标题文档</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权威指南</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编程艺术</p> <p>45￥</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> <div id="allMoney">90￥</div>--> </div> </body> </html>
