html5 拖拽函数1--不兼容火狐-CSDN博客

本文链接：https://blog.csdn.net/u012138854/article/details/109590927

拖拽元素事件 ondragstart拖拽前触发 ondrag拖拽结束之前连续触发 ondragend 拖拽结束前触发 目标元素事件 ondragenter进入目标元素触发相当于mouseover ondragover 进入目标，离开目标之间连续触发 ondragleave 离开目标元素触发，相当于mouseout ondrop 在目标元素上释放鼠标触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

<style>
.div1{width: 500px; height: 600px; background: yellow; font-size: 22px; position: absolute; bottom: 0;}
.div3{width: 500px; height: 600px; background: yellow; font-size: 22px; position: absolute; left: 600px;}
li{display: block; width: 50px; height: 50px; background: red; margin-top: 10px;}
</style>
<script>
   window.onload=function (){
           var oli=document.getElementsByTagName('li');
           var odiv=document.getElementById('div4');
        
           var k=0;
         for(var i=0; i<oli.length; i++)
         {
               oli[i].ondragstart=function(){

                   this.style.background='yellow';
               }
              oli[i].ondrag=function(){
                  document.title=k++;
              }
              oli[i].ondragend=function(){    
                      this.style.background='green';
              }
         }

         odiv.ondragenter=function(){
             this.style.background='red';
         }
           odiv.ondragover=function(ev){
             document.title=k++;
             ev.preventDefault();
         }
          odiv.ondragleave=function(){
             this.style.background='blue';
         }
          odiv.ondrop=function(){
             alert('要想运行此函数必须在ondragover里阻止默认事件');
         }

   }
</script>
</head>
<body>
<div id="div2" class="div1">
拖拽元素事件<br/>
ondragstart拖拽前触发<br/>
ondrag拖拽结束之前连续触发<br/>
ondragend 拖拽结束前触发<br/>
目标元素事件<br/>
ondragenter进入目标元素触发 相当于mouseover<br/>
ondragover 进入目标，离开目标之间连续触发<br/>
ondragleave 离开目标元素触发，相当于mouseout<br/>
ondrop  在目标元素上释放鼠标触发<br/>
</div>
<div id="div4" class="div3"></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>