jQuery图片列表拖拽排序布局插件

查看演示 下载资源 下载积分： 30 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，先简单设置好页面元素的样式，代码如下：

<style type="text/css">
* {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>

接着引入一个move.js插件，并设置好页面加载后的鼠标拖放等的响应，代码如下：

<script type="text/javascript" src="js/move.js"></script>
<script type="text/javascript">
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>

页面的body部分，仅需设置好一个图片列表即可，代码如下：

<ul id="ul1">
	<li><img src="images/1.png" width="200" height="150" /></li>
	<li><img src="images/2.png" width="200" height="150" /></li>
	<li><img src="images/3.png" width="200" height="150" /></li>
	<li><img src="images/4.png" width="200" height="150" /></li>
	<li><img src="images/5.png" width="200" height="150" /></li>
	<li><img src="images/6.png" width="200" height="150" /></li>
</ul>