基于jquery的拖动布局插件_jquery-js tutoriel-php.cn

基于jquery的拖动布局插件_jquery
WBOY
Libérer： 2016-05-16 17:58:57
original
1063 Les gens l'ont consulté
(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_Y) && (event.clientY+$(Move_obj).height() > Min_Y) && (event.clientX > Min_X) && (event.clientY $(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); 
调用例子:
复制代码代码如下: