爱程序网

html5 拖曳功能的实现[转]

来源: 阅读:

HTML5中实现拖放操作,至少经过如下步骤
1)设置被拖放对象元素的draggable属性设置为true
2)编写与拖放有关的事件处理代码

事件 产生事件的元素 描述
dragstart 被拖拽物体 开始拖放
dragenter 被拖拽物体开始进入区域 进入范围
dragover 拖放过程中鼠标经过的元素(包括目标对象) 正在元素上
dragleave 拖放离开时鼠标经过的元素(包括目标对象) 离开范围
drop 目标对象 被拖拽物体放下 
dragend 被拖拽物体 拖放结束

事件发生的顺序: dragstart -> dragenter -> dragover ->dragleave ->drop ->dragend
如果分为两组来看:

被拖拽元素 (发生的事件) 要进入的目标元素(发生的事件)
dragstart dragenter
dragend dragover
  dragleve
  drop

可以学习一下W3school 的拖放 HTML5 拖放 

1. 第一个小例子:做了一个删除icon 的demo
<!DOCTYPE html>
 <html>
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
   <title>Demo</title>
   <style>
    html,body{width:100%;height:100%;}
    .wrapper{ width:580px;margin:0px auto;margin-top:80px;}
    ul{list-style:none;}
    li{float:left;margin-right:20px;}
    img{border-radius:12px;width:100px;height:100px;}
    .rubbish{position:absolute;bottom:80px;background:url("drag/220839emsyf6bty8sfgrxf.png")
       no-repeat;width:128px;height:128px;left:50%;margin-left:-64px;}
  </style>
 </head>
 <body>
 <div class="wrapper">
  <ul>
   <li draggable="true"><img src="drag/mzl.kcoxjsrs.png1.jpg" id="1"/></li>
   <li draggable="true"><img src="drag/mzl.dgltpgis.png1.jpg" id="2"/></li>
   <li draggable="true"><img src="drag/mzl.eiohimmz.png1.jpg" id="3"/></li>
   <li draggable="true"><img src="drag/mzl.aiikkslk.png1.jpg" id="4"/></li>
  </ul>
 </div>
  <div class="rubbish" id="rubbish"></div>
<script>

 var iconarr = document.getElementsByTagName("li");//icon数组
      var rubbishbin = document.getElementById("rubbish");
      for( var i=0;i< iconarr.length;i++ ){
           iconarr[i].ondragstart = function(ev){
             /*拖拽开始(被拖拽元素) ondragstart 不可以写preventDefault事件*/
             ev.dataTransfer.setData("text",ev.target.id);//存储拖拽元素的id*/
           }
     }
     rubbishbin.ondragover = function(ev){
         /*拖拽元素进入目标元素头上,不可少*/
         ev.preventDefault();
    }
   rubbishbin.ondrop = function(ev){
       /*拖拽元素进入目标元素头上,同时鼠标松开的时候*/
        ev.preventDefault();
        if(window.addEventListener){
            ev.stopPropagation();
        }else if(window.attachEvent){
            ev.cancelBubble=true;
        }
        var ul = document.getElementsByTagName("ul")[0];
         //拖拽的是img 移除的是Li
        var node = document.getElementById(ev.dataTransfer.getData("text")).parentNode;
        ul.removeChild(node);
        rubbishbin.style.background="url('drag/220926qem3c3dsu53u8sha.png') no-repeat";
   }

</script>
</body>
</html>

2. 利用drag & drop拖拽物体更换位置

<!DOCTYPE HTML>
 <html>
  <head>
   <meta charset="gbk"/>
   <title>Demo</title>
   <style>
    html,body{width:100%;height:100%;}
    .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="http://i1.mm-img.com/ios/78/60/786031289/mzl.kcoxjsrs.png1.jpg"/></li>
   <li draggable="true"><img src="http://i1.mm-img.com/ios/88/61/886104377/mzl.dgltpgis.png1.jpg"/></li>
   <li draggable="true"><img src="http://i1.mm-img.com/ios/84/1/840146800/mzl.eiohimmz.png1.jpg"/></li>
   <li draggable="true"><img src="http://i1.mm-img.com/ios/83/59/835969177/mzl.aiikkslk.png1.jpg"/></li>
   <li draggable="true"><img src="http://i1.mm-img.com/ios/28/17/281796108/mzl.oyxfxpvw.png1.jpg"/></li>
   <li draggable="true"><img src="http://i1.mm-img.com/ios/87/85/878549709/mzl.swnecgkk.png1.jpg"/></li>
   <li draggable="true"><img src="http://i1.mm-img.com/ios/78/70/787063884/mzl.pmfectba.jpg1.jpg"/></li>
   <li draggable="true"><img src="http://i1.mm-img.com/ios/87/18/871809581/mzl.fbyoqfjw.png1.jpg"/></li>
   <li draggable="true"><img src="http://i1.mm-img.com/ios/66/93/669390657/mzl.ekoptmtx.png1.jpg"/></li>

</ul>
</div>
<script>

  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(" ");
       }
    }

</script>
</body>
</html>

第二个例子中有一点疑惑:
  我一开始想用dataTransfer.setData("url",src)来存储src 的,但是发现这样在IE9中getData("url")的时候无法获取值,所以改回"text"了。

关于爱程序网 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助