基于jquery的可以拖动的DIV布局插件代码
代码如下:
(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" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://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="https://demo.jb51.net/jslib/jquery/jquery-1.4.2.min.js"></script>
<script src="https://demo.jb51.net/jslib/lsmovepanel.js"></script>
<body>
<p 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>
</p>
<script>
$("#panel").lsmovepanel();
</script>
</body>
</html>