Question

I have the code below that makes a list of div’s drag and droppable, on drop it returns a list of the id’s in there new order.

I need to add 2 features to this code somehow.

1)
In a dropdown select list there will be 5 options. 3,6,9,12,15 and when a user picks one of these numbers I need to highlight the first X number of the div’s. if a user selects 9 I need for the first 9 div’s in the drag and drop list to change the background color so you can tell that those 9 are selected.
I also need another ajax call to be made anytime this dropdown list number is changed to save this number.
When the page is reloaded this dropdown will pull the number from a DB so if a user already had 99 saved in the DB, when they visit this page the script would show 9 in the box and have 9 div’s selected already

2)
On the drag/drop part, on drop a value like this is returned 0|1|2|3|4|5 and so on in the proper order. I need to limit this list to only return the first X amount of numbers. If the dropdown box selected 9 above then it should only save the first 9 div’s order.

Can anyone help please?

<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>

Answer 1

Use this css selector:
http://api.jquery.com/lt-selector/

So:

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