Html轻松使用拖拽实现垃圾桶，代码带注释，包你能看懂
生活随笔
收集整理的這篇文章主要介紹了
Html轻松使用拖拽实现垃圾桶，代码带注释，包你能看懂
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
效果
參考教程：
W3school:
http://www.w3school.com.cn/html5/html_5_draganddrop.asp
菜鳥教程：
http://www.runoob.com/jsref/event-ondragend.html
關(guān)鍵知識(shí)點(diǎn)：
在拖動(dòng)目標(biāo)上觸發(fā)事件 (源元素):
ondragstart - 用戶開始拖動(dòng)元素時(shí)觸發(fā)
ondrag - 元素正在拖動(dòng)時(shí)觸發(fā)
ondragend - 用戶完成元素拖動(dòng)后觸發(fā)
釋放目標(biāo)時(shí)觸發(fā)的事件:
ondragenter - 當(dāng)被鼠標(biāo)拖動(dòng)的對(duì)象進(jìn)入其容器范圍內(nèi)時(shí)觸發(fā)此事件
ondragover - 當(dāng)某被拖動(dòng)的對(duì)象在另一對(duì)象容器范圍內(nèi)拖動(dòng)時(shí)觸發(fā)此事件
ondragleave - 當(dāng)被鼠標(biāo)拖動(dòng)的對(duì)象離開其容器范圍內(nèi)時(shí)觸發(fā)此事件
ondrop - 在一個(gè)拖動(dòng)過程中，釋放鼠標(biāo)鍵時(shí)觸發(fā)此事件
實(shí)現(xiàn)
<!doctype html> <html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>垃圾箱</title><style>ul{overflow:hidden;}li{width:80px;height: 50px;line-height:50px;border:1px solid #000;margin:20px;list-style:none;float:left;}#out{width:100px;height: 150px;background:url() 0 0 no-repeat;margin:100px;background-size:100%;color:red;border:4px solid #000;text-align:center;}</style></head><script type="text/javascript">window.onload=function(){<!-- 獲取到所有l(wèi)i標(biāo)簽 -->var ali=document.getElementsByTagName('li');<!-- 通過id獲取到垃圾箱 -->var oDiv=document.getElementById("out");<!-- 通過id獲取到刪除提示 -->var txt=document.getElementById("txt");var targetLi=null//拖拽事件，循環(huán)獲取到的li標(biāo)簽的長度for(var i=0;i<ali.length;i++){<!-- ondragstart 事件在用戶開始拖動(dòng)元素或選擇的文本時(shí)觸發(fā)。 --><!-- 這里是拖動(dòng)每一個(gè)li標(biāo)簽時(shí)觸發(fā)函數(shù) -->ali[i].ondragstart=function(ev){<!-- 將拖動(dòng)的元素的背景顏色設(shè)置為黃色 -->this.style.background='yellow';?<!-- 將當(dāng)前拖拽的元素賦給targetLi -->targetLi=this;<!-- dataTransfer.setData() 方法設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值 --><!-- 在這個(gè)例子中，數(shù)據(jù)類型是 "Text"，值是拖動(dòng)元素的 innerHTML -->ev.dataTransfer.setData('Text',this.innerHTML);}<!-- ondragend 事件在用戶完成元素或首選文本的拖動(dòng)時(shí)觸發(fā) -->ali[i].ondragend=function(){this.style.backgroud=""}}<!-- ondragenter - 當(dāng)被鼠標(biāo)拖動(dòng)的對(duì)象進(jìn)入其容器范圍內(nèi)時(shí)觸發(fā)此事件 -->oDiv.ondragenter=function(){this.style.borderColor='red'}<!-- ondragover - 當(dāng)某被拖動(dòng)的對(duì)象在另一對(duì)象容器范圍內(nèi)拖動(dòng)時(shí)觸發(fā)此事件 -->oDiv.ondragover=function(ev){ev.preventDefault()}<!-- ondragleave - 當(dāng)被鼠標(biāo)拖動(dòng)的對(duì)象離開其容器范圍內(nèi)時(shí)觸發(fā)此事件 --><!-- 離開后垃圾箱邊框恢復(fù)黑色 -->oDiv.ondragleave=function(){this.style.borderColor='#000'}<!-- ondrop - 在一個(gè)拖動(dòng)過程中，釋放鼠標(biāo)鍵時(shí)觸發(fā)此事件 -->oDiv.ondrop=function(ev){this.style.borderColor='#000'var oText=ev.dataTransfer.getData('Text');txt.innerHTML="刪除的是："+oText;targetLi.parentNode.removeChild(targetLi);}}</script><body><ul><li draggable="true">白色垃圾</li><li draggable="true">大氣污染</li><li draggable="true">香蕉皮</li><li draggable="true">易拉罐</li><li draggable="true">白色垃圾</li></ul><p id="txt"></p><div id="out">垃圾箱</div></body> </html>?
總結(jié)
以上是生活随笔為你收集整理的Html轻松使用拖拽实现垃圾桶，代码带注释，包你能看懂的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Eclipse假死，一直LoadingD
- 下一篇： 赶紧下载SublimeText并快速设置