html 拖拽布局插件,基于jquery的拖动布局插件

(function($){

$.fn.lsMovePanel=function(){

var id=this.attr("id");

var X=Y=0;

var offsetX=offsetY=0;//绝对位置

var OldIndex=0;///存储原始索引

var Temp_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);

调用例子:

#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;

}

$("#Panel").lsMovePanel();