html5 兼容火狐 ev的事件 

<!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 oul=document.getElementsByTagName('ul')[0];
           var oli=document.getElementsByTagName('li');
           var odiv=document.getElementById('div4');
        
           var k=0;
         for(var i=0; i<oli.length; i++)
         {        oli[i].index=i;
               oli[i].ondragstart=function(ev){
                 ev=ev||window.event;
                 ev.dataTransfer.setData('name',this.index);
                 ev.dataTransfer.setDragImage(odiv,0,0);
                   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(ev){
              
               
             alert(ev.dataTransfer.getData('name',this.index));
             oul.removeChild(oli[ev.dataTransfer.getData('name',this.index)]);
           for(var i=0; i<oli.length; i++){
             oli[i].index=i;
         }
      }
   }
</script>
</head>
<body>
<div id="div2" class="div1">
ev.dataTransfer.setData('name',this.index);
保存当前用户的索引

获取当前用户的索引
oli[ev.dataTransfer.getData('name',this.index)
拖动时候获取的图片
ev.dataTransfer.setDragImage(odiv,0,0); 1参可以是图片 2参坐标 3坐标
</div>
<div id="div4" class="div3"></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

ev.dataTransfer.setData('name',this.index); 保存当前用户的索引

ev.dataTransfer.getData('name',this.index）获取当前用户的索引

posted @ 2017-01-02 22:35  distant-遥远  阅读(725)  评论(0)  编辑  收藏  举报