How to make tags randomly switch places?

I have several <li> tags under one id, such as:

<div id="myID">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</div>

I would like them to randomly switch places on rollover. I thought perhaps with开发者_运维技巧 the Sortable jQuery effect? but not sure ... any help would be appreciated. Thanks.

randomly?

$('#myID').bind('mouseover', function(){
    $('#myID li').sort(function(){ return Math.random() - .5; }).each(
        function(){
            $('#myID').append(this);
        }
    );
});

Here is a blog post on the subject:

• Sorting elements with jQuery

You can use jquery-shuffle, use mouseenter though, otherwise your "li" will shuffle furiously. http://mktgdept.com/js/jquery-shuffle.js?v0.0.1

<div id="myID">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</div>

<script type="text/javascript">
$('#myID').mouseenter(function(){

    $('#myID li').shuffle();

});
</script>

Same goes for cwolves script, you want mouseenter