<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
padding: 5px;
width: 480px;
height: 640px;
margin: 100px auto;
position: relative;
background: blue;
}
li {
width: 150px;
height: 150px;
margin: 5px;
float: left;
overflow: hidden;
background: darkorange;
cursor: move;
-webkit-user-select: none;
}
li img {
width: 150px;
height: 150px;
display: block;
border: none;
}
</style>
<body>
<ul>
<li><img src="img/1.png"/></li>
<li><img src="img/2.png"/></li>
<li><img src="img/3.png"/></li>
<li><img src="img/4.png"/></li>
<li><img src="img/5.png"/></li>
<li><img src="img/6.png"/></li>
<li><img src="img/7.png"/></li>
<li><img src="img/8.png"/></li>
<li><img src="img/9.png"/></li>
<li><img src="img/10.png"/></li>
<li><img src="img/11.png"/></li>
<li><img src="img/12.png"/></li>
</ul>
</body>
</html>
<script src="js/event.js"></script>
<script src="js/drag_oop.js"></script>
<script src="js/tween.js"></script>
<script>
var oLis = document.getElementsByTagName("li");
//第一步：把浮动布局改造成绝对定位布局，否则无法拖拽
for (var i = oLis.length - 1; i >= 0; i--) {
var oLi = oLis.item(i);
oLi.style.top = (oLi.t = oLi.offsetTop) + "px";
oLi.style.left = (oLi.l = oLi.offsetLeft) + "px";
oLi.style.position = "absolute";//定位要后做
oLi.style.margin = 0;
var obj = new Drag(oLi);
obj.border();
obj.on("dragstart", increaseIndex);
obj.on("dragend", goHome);
obj.on("drag", getHited);
obj.on("dragend",changePosition);
}
//点谁谁到前面
var index = 0;
function increaseIndex() {
this.ele.style.zIndex = ++index;
}
//回到原位
function goHome() {
animate(this.ele, {left: this.ele.l, top: this.ele.t}, 400, 2);
}
//碰撞变色
function getHited() {
var ele = this.ele;
this.aHited = [];
for (var i = 0; i < oLis.length; i++) {
var oLi = oLis.item(i);
if (ele == oLi)continue;
oLi.style.background="";
if (test(ele, oLi)) {
oLi.style.background = "yellow";
this.aHited.push(oLi);//把装上的保存到数组里
}
}
}
function test(r, b) {
if (r.offsetLeft + r.offsetWidth < b.offsetLeft || r.offsetTop + r.offsetHeight < b.offsetTop || r.offsetLeft > b.offsetLeft + b.offsetWidth || r.offsetTop > b.offsetTop + b.offsetHeight) {
return false;//以上没有相撞
} else {
return true;
}
}
//图片交换位置
function changePosition(){
var a=this.aHited;
if(a){
for(var i=0;i< a.length;i++){
var oLi=a[i];
var ele=this.ele;
oLi.distance=Math.pow(oLi.offsetLeft-ele.offsetLeft,2)+Math.pow(oLi.offsetTop-ele.offsetTop,2);
}
a.sort(function(a,b){
return a.distance- b.distance;
});
a[0].style.background="black";
oLi=a[0];
animate(oLi,{left:ele.l,top:ele.t},400,4);
animate(ele,{left:oLi.l,top:oLi.t},400,3);
var templ=ele.l;
var tempt=ele.t;
ele.l=oLi.l;
ele.t=oLi.t;
oLi.l=templ;
oLi.t=tempt;
}
}
</script>
javascript拖拽图片到指定位置.zip （23个子文件） 
javascript拖拽图片到指定位置 img 
11.png 54KB 10.png 72KB 5.png 240KB 9.png 92KB 1.png 43KB 14.png 22KB 6.png 20KB 2.png 51KB 12.png 166KB 7.png 260KB 4.png 41KB 13.png 69KB 8.png 287KB 3.png 131KB
index.html 4KB js 
drag.js.bak 1KB drag.js 744B drag_oop.js.bak 3KB event.js 2KB drag_oop.js 2KB tween.js 11KB event.js.bak 2KB tween.js.bak 11KB资源评论
