jQuery UI 정렬 가능한 목록 미러

Question

축소판 그림이있는 갤러리가 있습니다 (중요한 경우 FlexSlider 2 사용).

내 문제는 다음과 같습니다. 축소판을 사용하여 사진의 순서를 변경할 수 있어야 미러처럼 작동합니다. 축소판의 순서를 변경하면 갤러리 자체의 순서도 변경됩니다. .

제외하고는

그래서 (내가 루비 레일에 응용 프로그램 "acts_as_list"보석을 사용)가 새로운 질서를 기록 할 스크립트에 AJAX를 통해 직렬화() 정보를 게시해야 좋을 것이라고에서, 이런 일을 상상할에 :

<ul id="gallery"> 
    <li>Img 1</li> 
    <li>Img 2</li> 
</ul> 

<ul id="thumbnails"> 
    <li>Img 1 thumb</li> 
    <li>Img 2 thumb</li> 
</ul> 

그래서 만 #thumbnails은 변경해야 ...하지만 #gallery의 순서가 자동으로 변경해야합니다.

그게 가능합니까?

Answer 1

여기 예제를 기반으로 할 수있는 해결책은 있지만별로 좋지는 않지만 모든 주요 부분이 있습니다. 이 코드는 썸네일 인덱스를 기반으로 이미지를 재정렬하며 아무 것도 serialize하지 않습니다.

바이올린

http://jsfiddle.net/Rusln/NhuZp/

코드

var originalIndex; 
var newIndex; 
var originalImage; 
var newImage; 
var gallery = $("#gallery"); 
$("#thumbnails").sortable({ 
    start:function(ev,ui){ 
     originalIndex = ui.item.index(); 
     originalImage = gallery[0].children[originalIndex]; 
    }, 
    stop:function(ev,ui){ 
     newIndex = ui.item.index(); 
     newImage = gallery[0].children[newIndex];   
     if(originalIndex < newIndex){ 
      $(newImage).after(originalImage); 
     }else{ 
      $(newImage).before(originalImage); 
     } 
    } 
}) 

일 뭐죠?

• 는 원래의 인덱스에 해당하는
• 찾기 이미지가
• 찾기 이미지가 새로운 인덱스에 해당하는
는
• 새로운 인덱스
에 원래의 인덱스를 비교
• 썸네일의 새로운 인덱스를 얻을 썸네일의 원래 인덱스를 얻을
• 원래 인덱스와 새 인덱스를 비교 한 결과를 기준으로 이미지 위치가 변경됩니다.