<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS图片拖拽排序效果代码</title>
<style>
* {margin:0; padding:0;list-style: none}
#ul1 {width:660px; position:relative; margin:10px auto;}
#ul1 li {width:200px; height:150px; float:left; list-style:none; margin:10px;}
#ul1 li:hover{ border-color: #9a9fa4; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.85);}
#ul1 .active{ border:1px dashed red;}
</style>
<script type="text/javascript" src="move.js"></script>
<script>
window.onload = function() {
var oUl= document.getElementById("ul1");
var aLi = oUl.getElementsByTagName("li");
var disX = 0;
var disY = 0;
var minZindex = 1;
var aPos =[];
for(var i=0;i<aLi.length;i++){
var t = aLi[i].offsetTop;
var l = aLi[i].offsetLeft;
aLi[i].style.top = t+"px";
aLi[i].style.left = l+"px";
aPos[i] = {left:l,top:t};
aLi[i].index = i;
}
for(var i=0;i<aLi.length;i++){
aLi[i].style.position = "absolute";
aLi[i].style.margin = 0;
setDrag(aLi[i]);
}
//拖拽
function setDrag(obj){
obj.onmouseover = function(){
obj.style.cursor = "move";
}
obj.onmousedown = function(event){
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
obj.style.zIndex = minZindex++;
//当鼠标按下时计算鼠标与拖拽对象的距离
disX = event.clientX +scrollLeft-obj.offsetLeft;
disY = event.clientY +scrollTop-obj.offsetTop;
document.onmousemove=function(event){
//当鼠标拖动时计算div的位置
var l = event.clientX -disX +scrollLeft;
var t = event.clientY -disY + scrollTop;
obj.style.left = l + "px";
obj.style.top = t + "px";
/*for(var i=0;i<aLi.length;i++){
aLi[i].className = "";
if(obj==aLi[i])continue;//如果是自己则跳过自己不加红色虚线
if(colTest(obj,aLi[i])){
aLi[i].className = "active";
}
}*/
for(var i=0;i<aLi.length;i++){
aLi[i].className = "";
}
var oNear = findMin(obj);
if(oNear){
oNear.className = "active";
}
}
document.onmouseup = function(){
document.onmousemove = null;//当鼠标弹起时移出移动事件
document.onmouseup = null;//移出up事件，清空内存
//检测是否普碰上，在交换位置
var oNear = findMin(obj);
if(oNear){
oNear.className = "";
oNear.style.zIndex = minZindex++;
obj.style.zIndex = minZindex++;
startMove(oNear,aPos[obj.index]);
startMove(obj,aPos[oNear.index]);
//交换index
oNear.index += obj.index;
obj.index = oNear.index - obj.index;
oNear.index = oNear.index - obj.index;
}else{
startMove(obj,aPos[obj.index]);
}
}
clearInterval(obj.timer);
return false;//低版本出现禁止符号
}
}
//碰撞检测
function colTest(obj1,obj2){
var t1 = obj1.offsetTop;
var r1 = obj1.offsetWidth+obj1.offsetLeft;
var b1 = obj1.offsetHeight+obj1.offsetTop;
var l1 = obj1.offsetLeft;
var t2 = obj2.offsetTop;
var r2 = obj2.offsetWidth+obj2.offsetLeft;
var b2 = obj2.offsetHeight+obj2.offsetTop;
var l2 = obj2.offsetLeft;
if(t1>b2||r1<l2||b1<t2||l1>r2){
return false;
}else{
return true;
}
}
//勾股定理求距离
function getDis(obj1,obj2){
var a = obj1.offsetLeft-obj2.offsetLeft;
var b = obj1.offsetTop-obj2.offsetTop;
return Math.sqrt(Math.pow(a,2)+Math.pow(b,2));
}
//找到距离最近的
function findMin(obj){
var minDis = 999999999;
var minIndex = -1;
for(var i=0;i<aLi.length;i++){
if(obj==aLi[i])continue;
if(colTest(obj,aLi[i])){
var dis = getDis(obj,aLi[i]);
if(dis<minDis){
minDis = dis;
minIndex = i;
}
}
}
if(minIndex==-1){
return null;
}else{
return aLi[minIndex];
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li><img src="images/1.jpg" width="200" height="150" /></li>
<li><img src="images/2.jpg" width="200" height="150" /></li>
<li><img src="images/3.jpg" width="200" height="150" /></li>
<li><img src="images/4.jpg" width="200" height="150" /></li>
<li><img src="images/5.jpg" width="200" height="150" /></li>
<li><img src="images/6.jpg" width="200" height="150" /></li>
</ul>
<div style="text-align:center;">
</div>
</body>
</html>
