<!doctype html>
<head>
<style>
#test{
background-color: #eee;
border:2px solid #aaa;
position:relative;
height:50px;
display:block;
}
.bob{
border:black solid 1px;
height:50px;
width:50px;
z-index:0;
background-color:orange;
position:absolute;
}
</style>
<script src="js/jquery-1.7.1.min.js"></script>
<script>
$(function(){
$("div#test>div").addClass('pazB');
var speed=300;
var $test=$('#test');
var nom=[1,2,3,4,5,6,7,8];
for(var w=0; w<nom.length; w++){
$test.append('<div class="bob">'+nom[w]+'</div>');
};
var x=0;
function addL(){
$('.bob').each(function(elem){
x+=50;
return $(this).css({left:x+'px'});
});
};
addL();
/*sorting*/
function so(){
var arr=$('.bob').get();
var war=arr.sort(sort1);
$(war).appendTo('#test');
}
function sort1(){
return Math.random()>0.5 ?1:Math.random()<=0.5?-1:0;
}
function sorting(){
so();
var arrs=$('.bob').get();
arrs.sort(sort3);
function sort3(alfa, beta){
var aa=$(alfa,'.bob');
var bb=$(beta,'.bob');
var app=$(aa).position();
var bpp=$(bb).position();
var su=Math.random();
if(su>=-1){
var fpp=$('.bob').eq(0).position();
var ll=$('.bob:last');
$(ll).animate(fpp,600);
return $(aa).animate(bpp,600);
$(bb).animate(app,600);
}
else{ return false; }
};
};
$('.sort').click(function(){ sorting() });
});
</script>
</head>
<body>
<div id="test"></div>
<button class="sort">sort</button>
</body>
</html> |