jQuery 정렬에있는 모든 요소의 위치를 ​​추적하십시오.

Question

jQuery 정렬 가능 요소를 어떻게 추적 할 수 있는지 파악하려고합니다. 정렬 할 수있는 네 개의 요소 (div)가 있고 각각에 고유 한 ID가 있다고 가정 해 보겠습니다. # 100, # 200, # 300, # 400이라고 부르 자고 시작하자. 그러나 # 100을 이동하여 지점 번호 3을 말하면이 ID에 대한 새 위치를 저장할 수 있어야하며 다른 위치 번호도 업데이트 된 위치 값을 가져야합니다.

나는 어떤 의미가 있습니까? 기본적으로 각 고유 ID의 위치를 ​​가져오고 나중에 사용할 수 있도록 목록의 순서를 저장할 수 있습니다.

난 그냥 이동 된 하나 .. 올바른 방향으로

포인트 나이 들어, 정렬의 모든 요소에 대해보고 뭔가를 찾을 수 없어? 감사합니다.

Answer 1

제공되는 stop-event를 사용하여 항목을 추적 할 수 있습니다. 이것은 아주 작은 예입니다.

(function($) { 
    $('#sortable').sortable({ 
     stop: function(e, ui) { 
      console.log($.map($(this).find('li'), function(el) { 
       return el.id + ' = ' + $(el).index(); 
      })); 
     } 
    }); 
})(jQuery); 

이렇게하면 정렬 가능한 모든 항목의 배열이 ID와 현재 색인으로 기록됩니다. 난 당신이 내장 된 방법 toArray를 사용하는 것이 좋습니다 워드 프로세서 http://api.jqueryui.com/sortable/#method-toArray에 따르면 http://jsfiddle.net/beyondsanity/HgDZ9/

Answer 2

가능한 복제 jQuery UI Sortable Position입니다.

기본적으로 정렬 (또는 일반 오래된 부모 elemen) 내의 요소의 위치, 아무것도가 이동되어 있지 않은 경우이 코드는 2를 반환합니다

$('#300').index(); 

같은 뭔가를 (index() 시작은 계산 얻을 수 0에서), 요소가 재 배열 될 때 갱신됩니다.

여기에 데모가 있습니다 : http://jsfiddle.net/XB5Dh/. 요소를 클릭하여 요소의 위치를 ​​볼 수 있으며, 요소를 끌 때 새로운 위치가 표시됩니다.

Answer 3

: 여기

는 작업뿐만 아니라 jsfiddle에 대한 예입니다. 예 :

$(document).ready(function() { 
    $('#sortable').sortable({ 
     stop: function(e, ui) { 
     console.log($('#sortable').sortable('toArray')); 
     } 
    }); 
    $('#sortable').disableSelection(); 
    });