你的位置:首页 > 网页设计

[网页设计]html5 拖曳功能的实现[转]


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

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

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

被拖拽元素 (发生的事件)要进入的目标元素(发生的事件)
dragstartdragenter
dragenddragover
 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 >
  <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 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 >
  <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"了。