html5 拖拽函數1--不兼容火狐

時間 2019-11-16

原文原文鏈接

拖拽元素事件 
ondragstart拖拽前觸發 
ondrag拖拽結束以前連續觸發 
ondragend 拖拽結束前觸發 
目標元素事件 
ondragenter進入目標元素觸發至關於mouseover 
ondragover 進入目標，離開目標之間連續觸發 
ondragleave 離開目標元素觸發，至關於mouseout 
ondrop 在目標元素上釋放鼠標觸發 html

<!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>