jQuery의 정렬 구성 요소_jquery에 대한 심층 분석

1: 정렬 가능한 구성 요소는 페이지의 요소 집합을 정렬 가능한 으로 바꿀 수 있습니다. 그런 다음 마우스를 드래그하여 정렬할 수 있습니다. 목록의 요소 위치
$('.selector').sortable(options);
간단한 예:

코드 복사 코드는 다음과 같습니다.

마우스를 드래그하여 다음 옵션의 순서를 조정하세요

• 
   
• 화요일

 
• 수요일


• 목요일


• 금요일


• 토요일


• 토요일

< ;/div>

렌더링:
 
2: 연관 정렬 목록
보통 두 개 이상의 목록을 동시에 정렬하는 것을 연관 정렬 목록이라고 하며, connectWidth 속성을 사용하여 하나의 선택기를 설정하므로 순서를 지정할 수 있습니다. 요소가 서로 다른 목록 간에 이동되는 경우

코드 복사 코드는 다음과 같습니다.

 

   

     

休闲类小游戏

      ×

   

     
• 菠萝蛋糕

     
• 人品计算器

     
• 我的恐怖小屋

     
• 品茗闻香话茶道

     
• 暴打火柴人中文版

   

 

 

   

     

动作类小游戏

; Grand Slam Final & lt;/li & gt; & lt;/ul & gt;
& lt;/div & gt;
& lt;/div & gt;
& lt; div id = "Message_box1" class="message_box" >

< ;ul id="sortable3">

> ;





렌더링:

3: 구성요소 정렬 방법
3.1 직렬화 방법: 이 방법은 정렬 가능한 요소의 id 속성을 직렬화할 수 있습니다. 제출할 수 있는 양식 또는 Ajax 문자열은 다음 구문을 갖습니다.

$("#sortable").sortable(serialize", [options]);
3.2 toArray 메소드: 이 메소드는 정렬 가능한 요소의 ID를 문자열로 직렬화합니다. 구문 형식은 다음과 같습니다.
$("#sortable").sortable("toArray");
3.3 새로 고침 방법: 방법을 사용합니다. 정렬 가능한 목록 새로 고침
$("#sortable").sortable("refresh");
3.4 RefreshPositons 메서드:이 메서드는 캐시를 새로 고치는 데 사용됩니다. 정렬 가능한 요소의 위치 구문 형식은 다음과 같습니다:
$("#sortable").sortable("refreshPositions");
3.5 취소: 방법 현재 정렬 가능한 개체에서 요소의 순서 변경을 취소하는 데 사용됩니다.
$("#sortable").sortable("cancel");

코드 복사
코드는 다음과 같습니다.

 

调整下列课程的安排顺序

 

   
• 1.1 链接외부 .JS文件

   
• 1.2 使用Microsoft脚本编辑器

   
• 1.3 使用while循环

   
• 1.4 使용 for循环

 

 

   
• 2.1 使用Switch语句

   
• 2.2 使用Array对象属性


• 2.3 使用String对象적 방법

   
• 2.4 使用Date对象적 방법

 

  < ;input type="button" name="button" id="btn" value="确认修改" />
 

div>

렌더링:

여기서 att는 키로 사용되며, 값은 레이아웃에서 att로 정의된 문자열입니다.
4: 정렬 시간 콜백 함수
콜백 함수를 정의하여 정렬 작업을 보다 유연하게 제어할 수 있습니다.
4.1 start: 이벤트 유형은 sortstart, 정렬 시작 시 트리거
4.2 sort: 이벤트 유형은 sort, 정렬 프로세스 중에 트리거
4.3 변경: 이벤트 유형은 sortchange, 정렬 프로세스 중, 요소의 위치가 변경되면 트리거됩니다.
4.4 beforestop: 이벤트 유형은 sortbeforestop이며, 정렬이 중지되었지만 자리 표시자나 보조 요소를 계속 사용할 수 있을 때 트리거됩니다.
4.5 stop: 이벤트 유형은 정렬 프로세스가 중지될 때 트리거되는 sortstop입니다.
4.6 업데이트: 이벤트 유형은 정렬 프로세스가 중지되고 요소 위치가 변경될 때 트리거되는 sortupdate입니다.
4.7 receive: 이벤트 유형은 sortreceive이며 연결된 정렬 목록이 다른 목록의 요소를 수신할 때 트리거됩니다.
4.8 Remove: 이벤트 유형은 sortremove이며, 요소가 목록에서 제거됩니다 요소를 정렬하여 다른 목록에 배치할 때 트리거됩니다
4.9 이상: 이벤트 유형은 sortover이며 정렬 가능한 요소가 다른 연결된 목록으로 이동하면 트리거됩니다
4.10 out: 이벤트 유형은 정렬 가능한 요소가 연결된 목록에서 제거될 때 트리거되는 sortout입니다.
4.11 activate: 이벤트 유형은 sortactivate입니다. 연결됨 정렬 목록이 사용됩니다. 연결 목록은 드래그가 시작될 때 이 이벤트를 받습니다.
4.12 deactivate: 이벤트 유형은 정렬 작업이 중지될 때 트리거되는 sortdeactivate입니다. 가능한 모든 연결 목록

코드 복사 코드는 다음과 같습니다.

$("#droppable ").droppable({
eventName: function (event, ui) {
}
});

ui는 추가 항목을 포함하는 jQuery 객체입니다. information.jQuery 객체에는 다음 속성이 있습니다.
helper: 정렬할 현재 요소를 나타내는 jQuery 객체
position: top 속성과 왼쪽을 포함하는 객체 원본 객체를 기준으로 현재 요소의 위치를 ​​나타내는 속성
offset: 페이지를 기준으로 현재 요소의 절대 위치를 나타내는 상단 및 왼쪽 속성을 포함하는 객체
item: 현재 드래그된 jQuery 객체를 나타냅니다.
placeholder: 정의된 placeholder를 나타냅니다.
sender: 현재 드래그된 요소가 속한 정렬된 목록입니다. 두 목록 간 이동에 적용 가능

코드 복사 코드는 다음과 같습니다.

改变下面列车的顺序，查看事件触发结果

 
• K22次 始发站：桂lin -> 终点站：北京西

 
• K180次 始发站：郑州 -> 终点站：北京西

 
• K1038次  郑州  -> 终点站：深圳

 
• K236次  석가족庄  -> 终点站：上海

 
• T182次 汉口  -> 终点站：哈尔滨

 
• K926次  郑州  -> 终点站：哈尔滨