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

时间：2023-11-28 23:09:56

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

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

相关文章