정렬 후 요소 배치 위치는 어디입니까?

Question

당신은 jQuery UI sortable을 사용하여 정렬 된 요소의 새 색인을 결정합니까?

나는 목록이 정렬되어 있지 않고 모든 목록 항목에 ID가 있습니다. 위 또는 아래로 드래그하여 놓으면 새 위치를 알 필요가 있습니다 (이동 한 요소의 ID와 같이 막연하게 말하면됩니다). 이 새로운 요소를위한 공간을 만들기 위해) ... 심지어 가능할까요? 나는 .mousedown 및 .mouseup 이벤트를 사용하고 this.id ...를 얻으려고 시도했지만 동일한 요소를 두 번 드래그하여 반환합니다.

요약하자면 요소를 끌고 다니는 것을 알았지 만, 마침내 어디에서 쉴 수 있는지 알 수 있습니까?

코드가 실제로 테이블

입니다 ... 간단

---------HTML---------------- 
<table id="activities"> 
<thead> 
<tr><th>Activity Name</th><th>Activity Number</th></tr> 
</thead> 
<tbody> 
<tr id="node-1"> 
<td>Welcome</td> 
<td>1</td> 
</tr> 
<tr id="node-2"> 
<td>Eat</td> 
<td>2</td> 
</tr> 
<tr id="node-3"> 
<td>Walk</td> 
<td>3</td> 
</tr> 
<tr id="node-4"> 
<td>Sleep</td> 
<td>4</td> 
</tr> 
</tbody> 
</table> 

이제 JQuery와에 의해 행을 정렬하고 메신저 : 사용자가 위 또는 아래 행을 드래그 이제

$("#activities tbody").sortable(); 

, 그에 따라 활동 수를 변경해야합니다 ... 예를 들어 "환영"행을 "먹는"행 아래로 끌어 올리면 "환영"행의 활동 번호가 2 (이전에 1 이었음) "먹다"행의 활동 수는 1입니다 .... 올바른 활동으로 새로운 업데이트 된 테이블을 표시하려면 mber, 나는 그것이 어디에 떨어졌는지 알 필요가있다.

Answer 1

당신은 sortable() 방법 내에서 beforeStop 기능을 사용할 수 있습니다 :

$("#activities tbody").sortable(
    { 
     beforeStop: function(event, ui) { 
      newIndex = $(ui.helper).index('table tbody tr'); 
      alert(newIndex); 
     } 
    } 
); 

JS Fiddle demo;

---

편집는 요소의 삭제 id 입수에 대한 정보를 제공한다 :

$("#activities tbody").sortable(
    { 
     beforeStop: function(event, ui) { 
      var index = $(ui.helper).index('table tbody tr'); 
      alert('index = ' + index + '; id = ' + $(ui.helper).attr('id')); 
     } 
    } 
); 

JS Fiddle demo한다. 응답

---

편집은 OP에서, 의견, 질문 :

... 문제 해결! 문제가 아니라면 코드를 설명해 주시겠습니까? 물론

:

• newIndex = $(ui.helper).index('table tbody tr');
  이 현재 "헬퍼 요소 '를 선택하고, 해당 요소의 선택에 의해 리턴 된 요소에 들어가고 여기서,이 메소드로 전달 찾을 jQuery를 index() 방법을 사용하여, 이 경우 table tbody tr에 의해 반환되는 요소페이지에 table 및 tbody이 하나 이상있는 경우이 색인은 잘못되므로 표의 id을 (를) 선택하는 것이 바람직합니다 (index('#idOfTable tbody tr')).
• theID = ui.helper.id;
  이 변수는 ui.helper 변수 (그냥 삭제 된 요소)에있는 항목의 id을 반환합니다.
• alert()은 일상적인 JavaScript 경고 일뿐입니다.

참고 :

• sortable()
• beforeStop (위의 링크에서의 '이벤트'메뉴를 선택한 다음 beforeStop 클릭) :

이를 이벤트는 정렬이 중지되었지만 자리 표시 자/도우미가 계속 사용할 수있을 때 트리거됩니다.

코드 예제

공급

콜백 함수는 init 옵션으로 beforeStop 이벤트를 처리합니다.

 $(".selector").sortable({ 
      beforeStop: function(event, ui) { ... } 
     }); 

• index()

.

Answer 2

toArray method 및 stop event을 확인해야합니다.

는

Example

Answer 3

답변이 나쁘다고는 말할 수 없지만 요소를 떨어 뜨린 색인 위치를 아는 또 다른 간단한 방법을 발견했습니다. 중지 방법에서 다음을 수행하십시오.

alert(ui.item[0].rowIndex) 

새 포인터 위치를 알려줍니다. 또한 시작 인덱스 (드래그하기 전의 위치)를 알고 싶으면 start 이벤트를 제공해야합니다. 구문은 위와 같습니다. heres 전체 예제 func

var sourceIndex=""; 
$("#activities tbody").sortable(
    { 
     start: function(event, ui) { 
      sourceIndex=ui.item[0].rowIndex; 
      id=ui.item[0].rowIndex; 
     } 
    } 
     stop: function(event, ui) { 
      alert("source index="+sourceIndex); 
      alert("destination index"+ui.item[0].rowIndex); 
     } 
    } 
);