HTML5 拖放(Drag和drop)
在工作当中，我们会常常见到像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
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015年04月09日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读