HTML5 拖放(Drag和drop)

浏览数：32 / 时间：2015年06月09日

在工作当中，我们会常常见到像UC浏览器的新选项卡一样的可以自定义拖拽摆放效果。大的像淘宝的装修，QQ空间装扮等，小到一些游戏等等随处可见拖放的使用场景。

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

目前浏览器支持情况：Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。注释：在 Safari 5.1.2 中不支持拖放。

下面看看一个具体的字母拖放demo：

<!DOCTYPE HTML>
 <html>
  <head>
   <!-- 请加qq群：135430763共同学习！-->
   <meta charset="gbk"/>
   <title>HTML5 拖放(Drag和drop)</title>
   <style>
    html,body{width:100%;height:100%;background-color:gray;}
    .wrapper{ width:500px;margin:0px auto;margin-top:80px;}
    ul{list-style:none;width:500px;}
    li{float:left;margin:0px 20px 20px 0px;position: relative;width:132px;height:132px;}
    img{border-radius:12px;width:100px;height:100px;position: relative;-moz-user-select:none;cursor: move;}
    .rubbish{position:absolute;bottom:80px;background:url("empty.png") 
       no-repeat;width:128px;height:128px;left:50%;margin-left:-64px;}
    .hover{border:3px dashed #fff;}
    </style>
 </head>
 <body>
 <div class="wrapper">
  <ul>
   <li draggable="true"><img src="1.png"/></li>
   <li draggable="true"><img src="2.png"/></li>
   <li draggable="true"><img src="3.png"/></li>
   <li draggable="true"><img src="4.png"/></li>
   <li draggable="true"><img src="5.png"/></li>
   <li draggable="true"><img src="6.png"/></li>
   <li draggable="true"><img src="7.png"/></li>
   <li draggable="true"><img src="8.png"/></li>
   <li draggable="true"><img src="9.png"/></li>
   <li draggable="true"><img src="10.png"/></li>
   <li draggable="true"><img src="11.png"/></li>
   <li draggable="true"><img src="12.png"/></li>
   <!-- <li draggable="true"><img src="13.png"/></li>
   <li draggable="true"><img src="14.png"/></li>
   <li draggable="true"><img src="15.png"/></li>
   <li draggable="true"><img src="16.png"/></li>
   <li draggable="true"><img src="17.png"/></li>
   <li draggable="true"><img src="18.png"/></li>
   <li draggable="true"><img src="19.png"/></li>
   <li draggable="true"><img src="20.png"/></li>
   <li draggable="true"><img src="21.png"/></li>
   <li draggable="true"><img src="22.png"/></li>
   <li draggable="true"><img src="23.png"/></li>
   <li draggable="true"><img src="24.png"/></li>
   <li draggable="true"><img src="25.png"/></li>
   <li draggable="true"><img src="26.png"/></li> -->
</ul>
</div>
<script>
  //请加qq群：135430763共同学习！
  var imgarrs = document.querySelectorAll("img");
  var dragnow=null;//目前被拽着的物体
  for(var i=0;i< imgarrs.length;i++ ){
      addHandler(imgarrs[i],'dragstart',dragstart);
      addHandler(imgarrs[i],'dragenter',dragenter);
      addHandler(imgarrs[i],'dragover',dragover);
      addHandler(imgarrs[i],'dragleave',dragleave);
      addHandler(imgarrs[i],'drop',drop);
      addHandler(imgarrs[i],'dragend',dragend);
   }
   function addHandler(node,type,handler){
      if(window.addEventListener){
            node.addEventListener(type,handler,false);
      }else if(window.attachEvent){
            node.attachEvent('on'+type,handler);
      }
   }
                
   function dragstart(e){//被拖拽元素
     if(typeof e.target.style.opacity!='undefined'){
         e.target.style.opacity='0.4';
     }else{
         e.target.style.filter = "alpha(opacity=40)";        
     }
   
     addClass(e.target,"zIndex");
     e.dataTransfer.setData("text",e.target.src);//存储图片的src
     dragnow=e.target;//目前被拽的物体
   }
   
    function dragover(e){//拖拽目标身上的效果
       e.preventDefault();
       e.dataTransfer.dropEffect='move';
    }
   
    function dragenter(e){
       if(e.stopPropagation){e.stopPropagation();}
          if(typeof e.target.classList !='undefined'){
             e.target.classList.add('hover');
          }else{
             addClass(e.target,"hover");
          }
       }
    
	function dragleave(e){
       removeClass(e.target,"hover");
    }
    
	function drop(e){
       var src = e.dataTransfer.getData("text");//获取src
       e.preventDefault();
       if(e.stopPropagation){
          e.stopPropagation();
       }else if(e.attachEvent){
          e.cancelBubble=true;
       }
       if(dragnow == e.target){
          removeClass(e.target,"hover");
          removeClass(e.target,"zIndex");
          return;
      }else{//如果拽着的元素与被拽着的元素一样，不用处理
         dragnow.src = e.target.src;
         e.target.src = src;
         removeClass(e.target,"hover");
         removeClass(e.target,"zIndex");
      }
     }
    
	 function dragend(e){
        e.preventDefault();
        if(typeof e.target.style.opacity!='undefined'){
           e.target.style.opacity='1';
        }else{
           e.target.style.filter = "alpha(opacity=100)";        
        }//针对FF 在dragend 时候阻止冒泡
           removeClass(e.target,"zIndex");
        }//发生在被拖拽物体身上
                
     function addClass(node,newclass){
       if(node.className.indexOf(newclass)>0){
            return;
       }
       node.className = node.className?node.className+" "+newclass:newclass;
    }
    
	function removeClass(node,className){
        if(typeof node.classList !='undefined'){
          node.classList.remove(className);
        }else{
          var classarr = node.className.split(/\s+/);
          var arr = [];
          for( var i=0;i< classarr.length;i++ ){
             if(classarr[i] == className)continue;
             arr.push(classarr[i]);
          }
          node.className = arr.join(" ");
       }
    }
	//请加qq群：135430763共同学习！
</script>
</body>
</html>

运行效果如下：技术分享