jQuery sortable success alert

Question

I have a sortable stack that needs to be pulled into alphabetical order as a game idea. What I am trying to do is have a success alert or confirmation pop up to the user once they pull the last element (in this case, 'zebra') into the last spot.

Here is the jfiddle: http://jsfiddle.net/4uL28/3/

Can anyone tell me how to set this up so that when the user pulls in zebra as the last box in order, an alert tells them success, etc?

If you have any other ideas to better implement this please let me know!

<p>In the boxes below, sort  by alphabetical order</p>
        <ul id="sortable">  
            <li class="ui-state-default">Aardvark</li> 
            <li class="ui-state-default">Cat</li> 
            <li class="ui-state-default">Dog</li>  
            <li class="ui-state-default">Giraffe</li>  
            <li class="ui-state-default">Horse</li> 
            <li class="ui-state-default">Monkey</li>  
            <li class="ui-state-default">Panda</li>
            <li class="ui-state-default">Zebra</li>
         </ul> 


$(function() {
    $( "#sortable" ).sortable({

    });
});

$(function() {
    $(function() {
        $('#sortable').randomize('.ui-state-default');
    });
});


(function($) {
    $.fn.randomize = function(childElem) {
        return this.each(function() {
            var $this = $(this);
            var elems = $this.children(childElem);

            elems.sort(function() { return (Math.round(Math.random())-0.5); });  

            $this.remove(childElem);  

            for(var i=0; i < elems.length; i++)
                $this.append(elems[i]);      
            });    
        }
})(jQuery);

Answer 1

I would check on each sort to see if the whole list was in order. Just checking the last element dosen't seem enough.

http://jsfiddle.net/fdWP9/

$("#sortable").sortable({
    stop: function( event, ui ) {
        var inorder = true,
            $kids =  $(ui.item).parent().children(),
            current = null;
        $($kids).each(function() {
            if (current) {
                if ($(this).text() < current) {
                    inorder = false;
                    return;
                }
            }
            current = $(this).text();
        });

       if (inorder) alert('Yippee');
    }
});

$.fn.randomize = function (childElem) {
    return this.each(function () {
        var $this = $(this);
        var elems = $this.children(childElem);

        elems.sort(function () {
            return (Math.round(Math.random()) - 0.5);
        });

        $this.remove(childElem);

        for (var i = 0; i < elems.length; i++)
            $this.append(elems[i]);

    });
}

$(function () {
    $('#sortable').randomize('.ui-state-default');
});

Answer 2

In your sortable options, add a stop handler and put your logic there:

$( "#sortable" ).sortable({
  stop: function(event, ui) {
      //check if this element is the last li
      //if so, check that it is your defined answer
  }
});