jquery_jquery를 기반으로 한 드래그 레이아웃 플러그인-JS 튜토리얼-php.cn

코드 복사 코드는 다음과 같습니다.
(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( { 
커서: "이동", 
불투명도: "0.7" 
}) 
X=event.clientX; 
Y=event.clientY 
offsetX=$(this ).offset().left; 
offsetY=$(this).offset().top; 
OldIndex=$(this).index(); 🎜> 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({ 
커서:"default", 
불투명도:"1" , 
위치:"정적" 
}); 
}) 
$("#" id " li").each(function(i){ 
$(this). css( { 
"border-color":"#666666" 
}) 
} 
}); ).bind("mousemove",function(){ 
if($(this).attr("open")=="1"){ 
var current_X=current_Y=0; 
current_X= offsetX 이벤트 .clientX-X; 
current_Y=offsetY event.clientY-Y; 
$(this).css({ 
위치:"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 편차; 
var Max_Y=$(this).offset().top $(this).height()-Deviation 
var Min_Y= $( this).offset().top 편차 
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) 


호출 예: 



코드 복사
코드는 다음과 같습니다:
> ;
/li>