<!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>
HTML5 拖放(Drag和drop).zip （28个子文件） 
HTML5 拖放(Drag和drop) 
26.png 40KB 4.png 23KB 20.png 39KB 22.png 43KB 24.png 46KB 12.png 17KB 3.png 23KB 23.png 55KB
HTML5 拖放(Drag和drop).html 5KB 16.png 38KB 7.png 24KB 15.png 43KB 5.png 21KB 25.png 44KB 1.png 21KB 2.png 23KB 19.png 37KB 17.png 46KB 11.png 22KB 效果.png 964KB 21.png 41KB 6.png 38KB 8.png 22KB 9.png 34KB 10.png 34KB 13.png 44KB 18.png 42KB 14.png 40KB资源评论
asd52161002015-05-02对于我的学习很有帮助
