2011-11-08 6 views
0

정렬 여러 항목이 나는 분류는 다음과 같은 순서로 모든 것을 유지하기 위해 DB에 업데이트됩니다JQuery와 정렬 가능한, 클래스

<ul id="item_list" class="ui-sortable"> 
    <li id="recordsArray_1">item</li>  
    <li id="recordsArray_2" class='1'>item</li> 
    <li id="recordsArray_3" class='1'>item</li> 
    <li id="recordsArray_4" class='1'>item</li> 
    <li id="recordsArray_5">item</li>  
    <li id="recordsArray_6" class='5'>item</li> 
    <li id="recordsArray_7" class='5'>item</li> 
    <li id="recordsArray_8" class='5'>item</li> 
    </ul> 

다음과 유사한 정렬에서 목록 항목의 집합을 가지고 ... .

$(document).ready(function(){ 
    $(function() { 
    $("#item_list").sortable({ opacity: 0.6, cursor: 'move', update: function() { 
    var order = $(this).sortable("serialize") + '&action=updateRecordsListings'; 
    $.post("http://"+document.domain+"/includes/updateDB.php", order,function(theResponse){ 
    setClass() 
     }); 
     } 
     }); 
     }); 

     }); 

헤더 항목에는 클래스가 없으며 자식 요소에는 헤더 클래스가 있습니다. sortable은 헤더를 정렬 할 수 있으며 클래스를 기반으로하는 요소입니까? 즉 헤더를 드래그하면 모든 하위 요소가 드래그되지만 자식 요소는 개별적으로 드래그됩니다.

+0

그들을 정렬 : 대한 a fiddle입니다 –

답변

0

당신은 플러그인 옵션

$("#item_list").sortable({ opacity: 0.6, items: '.1, .5', cursor: 'move', update: function() 

하지만 늘 처음 "그룹"으로 마지막 요소를 drag'n'drop하는 사용자를 방지 (1 ~ recordsArray_8 2)

items: '.1, .5'을 추가 할 수 있습니다 당신이 엄격하게하려면 "더 클래스는"당신은 항목에 대한 기능을 사용할 수 없습니다 :

$("#item_list").sortable({ opacity: 0.6, items: selectSortItems("#item_list"), cursor: 'move', update: function()... 

function selectSortItems (sel) { 
    var list = []; 
    $(sel).find('li').each(function() { 
     if ($(this).attr('class')) { list.push(this) }; 
    }); 

    return list; 
} 

(sadely 항목은 콜백을하지 않는 것).

여기 당신

당신은 2 개의 다른 UL의 연결된를 확인한 다음해야