Posted in Javascript onNovember 25, 2011
(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.3water.com/jslib/jquery/jquery-1.4.2.min.js"></script> <script src="http://demo.3water.com/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>
基于jquery的拖动布局插件
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@