基于jquery的拖动布局插件

复制代码代码如下:

(function($){ 
$.fn.lsMovePanel=function(){ 
var id=this.attr("id"); 
var X=Y=0; 
var offsetX=offsetY=0;//绝对位置 
var OldIndex=0;///存储原始索引 
var Temp_Li="<li id=\"Temp_Li\" style=\"background-color:#FFFFFF;border-color:#FF023C\"></li>"; 
var Move_obj;///当前拖动的对象 
$("#"+id+" li").each(function(i){ 
$(this).attr("open","0"); 
//鼠标点击 
$(this).bind("mousedown",function(){ 
if(event.button==1 || event.button==0){$(this).attr("open","1");} 
if($(this).attr("open")=="1"){ 
$(this).css({ 
cursor:"move", 
opacity:"0.7" 
}); 
X=event.clientX; 
Y=event.clientY; 
offsetX=$(this).offset().left; 
offsetY=$(this).offset().top; 
OldIndex=$(this).index(); 
$(this).css({ 
position:"absolute", 
left:offsetX, 
top:offsetY 
}); 
$("#"+id+" li").each(function(i){ 
if(i==OldIndex){ 
$(this).after(Temp_Li); 
} 
}) 
} 
}); 
//鼠标放开 
$(this).bind("mouseup",function(){ 
if(event.button==1 || event.button==0){$(this).attr("open","0");} 
if($(this).attr("open")=="0"){ 
$("#Temp_Li").before($(this)); 
$(this).animate({ 
left:$("#Temp_Li").offset().left, 
top:$("#Temp_Li").offset().top, 
},300,function(){ 
$("#Temp_Li").remove(); 
$(this).css({ 
cursor:"default", 
opacity:"1", 
position:"static" 
}); 
}); 
$("#"+id+" li").each(function(i){ 
$(this).css({ 
"border-color":"#666666" 
}); 
}); 
} 
}); 
//移动 
$(this).bind("mousemove",function(){ 
if($(this).attr("open")=="1"){ 
var current_X=current_Y=0; 
current_X=offsetX+event.clientX-X; 
current_Y=offsetY+event.clientY-Y; 
$(this).css({ 
position:"absolute", 
left:current_X, 
top:current_Y 
}); 
Move_obj=this; 
$("#"+id+" li").each(function(i){ 
if(i!=OldIndex && $(this).attr("id")!="Temp_Li"){ 
var Deviation=0; 
var Max_X=$(this).offset().left+$(this).width()-Deviation; 
var Min_X=$(this).offset().left+Deviation; 
var Max_Y=$(this).offset().top+$(this).height()-Deviation; 
var Min_Y=$(this).offset().top+Deviation; 
if((event.clientX < Max_X) && (event.clientY+$(Move_obj).height() > Max_Y) && (event.clientY+$(Move_obj).height() > Min_Y) && (event.clientX > Min_X) && (event.clientY < Max_Y) ){ 
$(this).css({ 
"border-color":"#FF7578" 
}); 
//判断覆盖对象索引值在前还是后 
if(OldIndex>$(this).index()){ 
$("#Temp_Li").before($(this)); 
$("#Temp_Li").remove(); 
$(this).before(Temp_Li); 
}else{ 
$("#Temp_Li").after($(this)); 
$("#Temp_Li").remove(); 
$(this).after(Temp_Li); 
} 
}else{ 
$(this).css({ 
"border-color":"#666666" 
}); 
} 
} 
}) 
} 
}); 
}); 
} 
})(jQuery); 

调用例子:

复制代码代码如下:

<!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=gb2312"/> 
<title></title> 
<style> 
#Panel{ 
width:630px; 
height:auto; 
padding:0px; 
} 
#Panel li{ 
float:left; 
list-style:none; 
width:300px; 
height:100px; 
margin:5px; 
background-color:#D9F1FF; 
border:1px dotted #666666; 
text-align:center; position:static; 
} 
*{ 
font-size:12px; 
} 
</style> 
</head> 
<script src="http://demo.jb51.net/jslib/jquery/jquery-1.4.2.min.js"></script> 
<script src="http://demo.jb51.net/jslib/lsMovePanel.js"></script> 
<body> 
<div style="margin-left:100px;"> 
<ul id="Panel"> 
<li style="background-color:#3399FF"></li> 
<li style="background-color:#00CCFF"></li> 
<li style="background-color:#CC9900"></li> 
<li style="background-color:#FF6600"></li> 
<li style="background-color:#FFCC99"></li> 
</ul> 
</div> 
<script> 
$("#Panel").lsMovePanel(); 
</script> 
</body> 
</html> 