2013-06-18 1 views
6

JqueryUI에서 정렬 가능, 사용자가 항목을 끌면 호출 된 이벤트를 변경합니다. 나는 아래 예제에서 이것을 얻었다.Jquery UI 변경 이벤트의 정렬 가능한 항목 위치

jsFiddle code here 사용자가 항목 (Item7)를 드래그하고 항목을 드래그하여 위치를 변경하면서, 위치를 변경 코드 내에서

stop: function(event, ui) { 
     console.log("New position: " + ui.item.index()); 
    }, 
    change: function(event, ui) { 
     // When the item postion is changed while dragging a item, I want it's position 
     console.log("New position: " + ui.item.index()); 
    } 

. 끌기 항목의 위치를 ​​가져오고 싶습니다.

난 그냥 여기에 대답했다

: 위의 링크, 위치 값 (ui.item.index())에서 jQuery UI Sortable Position

인 아이템을 드래그하는 동안, 내가 원하는, 정지 기능에 액세스 할을 그 위치가 (변경 기능에)? 어떤 아이디어?

사용자가 item2 뒤에 item7을 배치하려고 할 때 이전 항목에서 값을 가져 오는 유효성 검사를 수행 할 것입니다. (끌기 항목의 현재 위치를 알고 있다면 이전 항목 만 액세스 할 수 있습니다.). 유효성 검사가 성공하면 배치하거나 메시지를 표시해야합니다.

+0

[이 질문에 대한 답변] (http://stackoverflow.com/questions/8148145/drag-event-for-jquery-ui-sortable)이 (가) 당신에게 유용 할 것 같습니다. – Ohgodwhy

답변

7

현재 발견 된 항목의 색인을 얻으려면 placeholder을 사용해보십시오.

change: function(event, ui) { 
     console.log("New position: " + ui.placeholder.index()); 
} 

FIDDLE

0

유다 듀란의 대답은 지속적으로 작동하지 않습니다 (내 머리를 인하 기 후이를 발견). 첫 번째 및 마지막 항목 자리 표시자는 마우스 위치에 따라 이동합니다.

function getPaceholderIndex(ui) { 
    var clone = $(myMenu).clone(); 
    $('.ui-sortable-helper', clone).remove(); 
    return $('.ghost', clone).index(); 
} 

은 실제 항목을 먼저 제거하고 자리 표시자를 남기므로보다 효율적으로 작동합니다. 내가 '고스트'를 자리 표시 자 매개 변수로 설정했음을 주목하십시오.

관련 문제