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>

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

jquery_jquery를 기반으로 한 드래그 레이아웃 플러그인