Question

I have a list of 20 items. I am using jquery drag and drop to allow the user to sort the list of items. I would like the top 10 items in the list to remain the same color, lets say yellow, as the items are rearranged. For instance, if the #19 item is dragged up to within the top ten, the #10 item will be pushed to #11 and the items which should be yellow would be #’s 1,2,3,4,5,19,6,7,8,9.

No matter which order, the top ten should remain yellow. The rest are just black

I can not figure out how to do this. Can someone point me in the right direction?

Thanks in advance!

Answer 1

You did not tell us your html so I have to guess your using a html list. When sorting stops you have to get the position of the element and descide which color to assign

http://api.jqueryui.com/sortable/#event-stop

and use index method

Working example: http://jsfiddle.net/txm9y/

$( "#sortable" )
    .sortable({
        stop: function(event, ui){
            $(this).trigger("markTopTen");
        }
    })
    .disableSelection()
    .bind("markTopTen", function() {
        $(this).find("li")
            .removeClass("topTen")
            .each(function(index){
            if(index < 10)
                $(this).addClass("topTen");
        });
    })
    .trigger("markTopTen");

Start sorting. Top ten will remain yellow while others are black.