HTML5 拖放(Drag和drop)

業餘草發表於2015-04-09
原文網址 : https://blog.csdn.net/xmtblog/article/details/44961639
HTML

在工作當中，我們會常常見到像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>

執行效果如下：

原始碼下載地址：http://download.csdn.net/detail/xmt1139057136/8647753

相關文章