Html轻松使用拖拽实现垃圾桶，代码带注释，包你能看懂
生活随笔
收集整理的這篇文章主要介紹了
Html轻松使用拖拽实现垃圾桶，代码带注释，包你能看懂
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果
參考教程：
W3school:
http://www.w3school.com.cn/html5/html_5_draganddrop.asp
菜鳥教程：
http://www.runoob.com/jsref/event-ondragend.html
關鍵知識點：
在拖動目標上觸發事件 (源元素):
ondragstart - 用戶開始拖動元素時觸發
ondrag - 元素正在拖動時觸發
ondragend - 用戶完成元素拖動后觸發
釋放目標時觸發的事件:
ondragenter - 當被鼠標拖動的對象進入其容器范圍內時觸發此事件
ondragover - 當某被拖動的對象在另一對象容器范圍內拖動時觸發此事件
ondragleave - 當被鼠標拖動的對象離開其容器范圍內時觸發此事件
ondrop - 在一個拖動過程中，釋放鼠標鍵時觸發此事件
實現
<!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(){<!-- 獲取到所有li標簽 -->var ali=document.getElementsByTagName('li');<!-- 通過id獲取到垃圾箱 -->var oDiv=document.getElementById("out");<!-- 通過id獲取到刪除提示 -->var txt=document.getElementById("txt");var targetLi=null//拖拽事件，循環獲取到的li標簽的長度for(var i=0;i<ali.length;i++){<!-- ondragstart 事件在用戶開始拖動元素或選擇的文本時觸發。 --><!-- 這里是拖動每一個li標簽時觸發函數 -->ali[i].ondragstart=function(ev){<!-- 將拖動的元素的背景顏色設置為黃色 -->this.style.background='yellow';?<!-- 將當前拖拽的元素賦給targetLi -->targetLi=this;<!-- dataTransfer.setData() 方法設置被拖數據的數據類型和值 --><!-- 在這個例子中，數據類型是 "Text"，值是拖動元素的 innerHTML -->ev.dataTransfer.setData('Text',this.innerHTML);}<!-- ondragend 事件在用戶完成元素或首選文本的拖動時觸發 -->ali[i].ondragend=function(){this.style.backgroud=""}}<!-- ondragenter - 當被鼠標拖動的對象進入其容器范圍內時觸發此事件 -->oDiv.ondragenter=function(){this.style.borderColor='red'}<!-- ondragover - 當某被拖動的對象在另一對象容器范圍內拖動時觸發此事件 -->oDiv.ondragover=function(ev){ev.preventDefault()}<!-- ondragleave - 當被鼠標拖動的對象離開其容器范圍內時觸發此事件 --><!-- 離開后垃圾箱邊框恢復黑色 -->oDiv.ondragleave=function(){this.style.borderColor='#000'}<!-- ondrop - 在一個拖動過程中，釋放鼠標鍵時觸發此事件 -->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>?
總結
以上是生活随笔為你收集整理的Html轻松使用拖拽实现垃圾桶，代码带注释，包你能看懂的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Eclipse假死，一直LoadingD
- 下一篇： 赶紧下载SublimeText并快速设置