基于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);调用例子:
相关文章
精彩导读
热门资讯
关注我们
