Html轻松使用拖拽实现垃圾桶，代码带注释，包你能看懂

今天药忘吃喽~ 2023-10-18 13:44 37阅读 0赞

## 效果 ##

![Image 1][]![20190113162917351.gif][]

### 参考教程： ###

W3school:

[http://www.w3school.com.cn/html5/html\_5\_draganddrop.asp][http_www.w3school.com.cn_html5_html_5_draganddrop.asp]

菜鸟教程：

[http://www.runoob.com/jsref/event-ondragend.html][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(){
      
      var ali=document.getElementsByTagName('li');
      
      var oDiv=document.getElementById("out");
      
      var txt=document.getElementById("txt");
    
      var targetLi=null
      
      //拖拽事件，循环获取到的li标签的长度
      for(var i=0;i<ali.length;i++){
       
       
       ali[i].ondragstart=function(ev){
        
        this.style.background='yellow'; 
        
        targetLi=this;
        
        
        ev.dataTransfer.setData('Text',this.innerHTML);
        
       }
       
       ali[i].ondragend=function(){
        this.style.backgroud=""
       }
      }
      
      oDiv.ondragenter=function(){
       this.style.borderColor='red'
      }
      
      oDiv.ondragover=function(ev){
       ev.preventDefault()
      }
      
      
      oDiv.ondragleave=function(){
       this.style.borderColor='#000'
      }
      
      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>

[Image 1]: 
[20190113162917351.gif]: https://img-blog.csdnimg.cn/20190113162917351.gif
[http_www.w3school.com.cn_html5_html_5_draganddrop.asp]: http://www.w3school.com.cn/html5/html_5_draganddrop.asp
[http_www.runoob.com_jsref_event-ondragend.html]: http://www.runoob.com/jsref/event-ondragend.html