zoukankan      html  css  js  c++  java
  • html5 拖拽函数1--不兼容火狐

    拖拽元素事件<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{ 500px; height: 600px; background: yellow; font-size: 22px; position: absolute; bottom: 0;}
    .div3{ 500px; height: 600px; background: yellow; font-size: 22px; position: absolute; left: 600px;}
    li{display: block;  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>
  • 相关阅读:
    Apache HTTP Server 与 Tomcat 的三种连接方式介绍
    Java使用Memcached
    缓存系统MemCached的Java客户端优化历程
    在Java中使用Memcached(转)
    memcached简介及java使用方法
    JS中冒泡排序,选择排序,快速排序
    DOM的查找,新增,删除操作
    JS中文档碎片的理解和使用
    JS中undefined和null的区别,以及出现原因
    JS中的数学方法
  • 原文地址:https://www.cnblogs.com/hack-ing/p/6243052.html
Copyright © 2011-2022 走看看