html5 拖曳功能的实现[转]-白红宇

html5 拖曳功能的实现[转]

阅读量：5030 次

发布时间：2019-06-12

本文共 7017 字，大约阅读时间需要 23 分钟。

HTML5中实现拖放操作，至少经过如下步骤

1）设置被拖放对象元素的draggable属性设置为true

2）编写与拖放有关的事件处理代码

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

事件发生的顺序： dragstart -> dragenter -> dragover ->dragleave ->drop ->dragend

如果分为两组来看：

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

可以学习一下W3school 的拖放

1. 第一个小例子：做了一个删除icon 的demo

<!DOCTYPE html>

<html>

<head>

<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>

<ul>

</ul>

</div>

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>

<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>

<ul>

</ul>

</div>

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"了。

转载于:https://www.cnblogs.com/sadkilo/p/5270880.html

你可能感兴趣的文章

Netty官方示例

查看>>

[数分提高]2014-2015-2第4教学周第2次课

查看>>

ansible进阶小技巧--tags