jQuery UI에서 UL 요소의 정렬 된 위치를 얻습니다.

Question

jQuery UI를 내 UL 목록에 정렬 ​​할 수 있습니다. 사용자가 목록을 정렬 할 때마다 각 li 요소가 목록의 "position"속성을 업데이트하도록합니다.

<ul> 
<li position="1">a</li> 
<li position="2">b</li> 
<li position="3">c</li> 
</ul> 

따라서 사용자가 c를 a와 바꾼 경우 위치도 업데이트됩니다. 나는 각 .each를 사용하려고 시도했지만, javascript는 LI 요소가 어떻게 표시되는지 요소의 생성 순서에 따르지 않는 것으로 보인다.

Answer 1

:eq 선택기 또는 index 방법을 사용해 보셨습니까? . 당신은 당신이 그렇게 같은 위치를 찾을 수있는 당신의 위치를 ​​찾기 위해 노력중인 리 요소를 알고 제공 :

<ul> 
<li id="c">c</li> 
<li id="b">b</li> 
<li id="a">a</li> 
</ul> 

var에 위치 = $ ('리 #의 B')를 인덱스를();

Answer 2

당신은 정렬 가능한의 "업데이트"이벤트를 활용하는 것이 좋습니다 :

$("ul").sortable({ 
    update: function(event, ui) { 
    var order = $(this).sortable('serialize'); 
    console.info(order); 
    } 
}); 

그런 다음 항목의 업데이트 순서를 끌어은 "직렬화"방법을 사용할 수 있습니다. 다른 답변에서 언급 한 바와 같이

<ul> 
    <li id="position_1">a</li> 
    <li id="position_2">b</li> 
    <li id="position_3">c</li> 
</ul> 

Answer 3

당신이 필요로 update 모든이다 사용 : 작업이 한 가지 요구 사항은 당신이 당신의 HTML을 업데이트 할 것 있도록 각 목록 항목의 ID를, 밑줄을 포함 할 것입니다

$(function() { 
    var $sortable = $('ul').sortable({ 
     update: function(event, ui) { 
      var counter = 1; 
      $('li', $sortable).each(function() { 
       $(this).attr('position', counter); 
       counter++; 
      }); 
     } 
    }); 
}); 

Example link