列表图片拖拽排序代码

QQ王国 2016-06-15 21:21:22 脚本代码无法统计

小中大

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>列表图片拖拽排序代码 </title></p>
<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>
<p><script type="text/javascript" >
;function getClass(cls){var ret=[];var els=document.getElementsByTagName("*");for(var i=0;i<els .length;i++){if(els[i].className===cls||els[i].className.indexOf("cls")>=0||els[i].className.indexOf(" cls")>=0||els[i].className.indexOf(" cls ")>0){ret.push(els[i]);}}
return ret;}
function getStyle(obj,attr){return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];}
function startMove(obj,json,fun){clearInterval(obj.timer);obj.timer=setInterval(function(){var isStop=true;for(var attr in json){var iCur=0;if(attr=="opacity"){iCur=parseInt(parseFloat(getStyle(obj,attr))*100);}else{iCur=parseInt(getStyle(obj,attr));}
var ispeed=(json[attr]-iCur)/8;
ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);if(iCur!=json[attr]){isStop=false;}
if(attr=="opacity"){obj.style.filter="alpha:(opacity:"+(json[attr]+ispeed)+")";obj.style.opacity=(json[attr]+ispeed)/100;
}else{obj.style[attr]=iCur+ispeed+"px";}}
if(isStop){clearInterval(obj.timer);if(fun){fun();}}},30);}
</els></script><br />
<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><br />
</ali></l2></ali></script></head><br />
<body></p>
<ul id="ul1">
<li><img src="http://i1.buimg.com/6509170772c19fc5.jpg" width="200" height="150" /></li>
<li><img src="http://i4.buimg.com/614da1f46f5a9b08.jpg" width="200" height="150" /></li>
<li><img src="http://i2.buimg.com/00b080df6ef9e410.jpg" width="200" height="150" /></li>
<li><img src="http://i4.buimg.com/a2b1d3b7cde2872f.jpg" width="200" height="150" /></li>
<li><img src="http://i2.buimg.com/06d17c5b0a80db97.jpg" width="200" height="150" /></li>
<li><img src="http://i1.buimg.com/653bfdffc0ef501f.jpg" width="200" height="150" /></li>
</ul>
<p></body><br />
</html>

» 转载保留版权：QQ王国 » 《列表图片拖拽排序代码》

» 本文链接地址：https://www.jsahz.com/394.html