2009-08-25 8 views
1

div의 드래그 앤 드롭리스트를 만드는 코드는 아래에 있습니다. 드롭하면 ID의 목록이 새로운 순서로 반환됩니다.jquery의 드래그 앤드 ID의 숫자 제한

어떻게 든이 코드에 2 개의 기능을 추가해야합니다.

1)
드롭 다운 선택 목록에는 5 가지 옵션이 있습니다. 3,6,9,12,15 사용자가이 숫자 중 하나를 선택하면 div의 첫 번째 X 번호를 강조 표시해야합니다. 사용자가 9를 선택하면 드래그 앤 드롭 목록에서 처음 9 개의 div가 필요하므로 배경색을 변경하면 9 개의 div가 선택되었음을 알 수 있습니다.
이 드롭 다운 목록 번호가이 번호를 저장하도록 변경되면 언제든지 다른 아약스 호출이 필요합니다.
페이지가 다시로드되면이 드롭 다운은 DB에서 번호를 가져옵니다. 사용자가 이미 DB에 저장된 99 개를 가지고 있으면이 페이지를 방문 할 때 스크립트는 상자에 9를 표시하고 이미 9 개의 div가 선택되어 있습니다

2)
끌어서 놓기 부분에서 드롭과 같은 값은 0 | 1 | 2 | 3 | 4 | 5 등의 순서로 반환됩니다. 첫 번째 X 양의 숫자 만 반환하도록이 목록을 제한해야합니다. 드롭 다운 상자가 위의 9를 선택한 경우 첫 번째 9 div의 순서 만 저장해야합니다.

아무도 도와 줄 수 있습니까?

<ul id="gallery"> 
    <li itemID='12'> 
     <div>Photo Here</div> 
    </li> 
    <li itemID='23'> 
     <div>Photo Here</div> 
    </li> 
    <li itemID='32'> 
     <div>Photo Here</div> 
    </li> 
    <li itemID='43'> 
     <div>Photo Here</div> 
    </li> 

    ...up to hundreds 
</ul> 


<script type="text/javascript"> 

    $("#gallery").dragsort({ 
     dragSelector: "li div", 
     dragEnd: saveOrder 
    }); 

    function saveOrder() { 
     var serialStr = ""; 
     $("#gallery li").each(function(i, elm) { 
      serialStr += (i > 0 ? "|" : "") + $(elm).attr("itemID"); 
     }); 
     alert(serialStr); 
     // $.ajax({ url: "saveorder.php/SaveListOrder", data: '{"ids":"' + serialStr + '"}', dataType: "json", type: "POST", contentType: "application/json; charset=utf-8" }); 
    }; 

</script> 

답변

1

사용이 CSS 선택기 : 그래서 http://api.jquery.com/lt-selector/

:

var serialStr = ""; 
var list = $("#gallery li:lt(" + $("#limit").val() + ")"); 
list.addClass("highlight").each(function(i, elm) { ... }); 
alert(serialStr); 
관련 문제