Rotating divs on mouse move

List of divs are placed in a circle which can be rotated

by pragya91

HTML

<div id="circle-list">
		    <div>1</div>
		    <div>2</div>
		    <div>3</div>
		    <div>4</div>
		    <div>5</div>
		    <div>6</div>
		    <div>7</div>
		    <div>8</div>
		    <div>9</div>
		    <div>11</div>
		    <div>12</div>
		    <div>13</div>
		</div>
		<div id="swipingDiv">Click and drag mouse to rotate</div>

CSS

#circle-list
			{

			    position:absolute;
			    margin:0;
			    padding:0;
			    list-style:none;
			    border:solid 2px solid black;
				width:200px;
				height:200px;
			}
			
			#circle-list div
			{
			    display:block;
			    position:absolute;
			    background:#ccc;
			    font-family:arial;
			    color:#666;
			    width:30px;
			    height:30px;
			    line-height:30px;
			    text-align:center;
			    margin: 0px 0 0 0px;
			    -webkit-border-radius: 15px;
			    -moz-border-radius: 15px;
			    border-radius: 15px;
			    border:2px solid pink;
			}

JavaScript

$( document ).ready(function(){
								
				var angleSteps = 360 / $('#circle-list div').length;
				var baseAngle = 0;
				
				function updateListPositions()
				{
				    $('#circle-list div').each(function(index, element)
				       {
				           var angle = baseAngle + (index * angleSteps);
				           var center = {x:60,y:180};
				           var distance = 150;
				           var x = distance * Math.cos(angle * (Math.PI / 180));
					       var y = distance * Math.sin(angle * (Math.PI / 180));
				           $(element).css({left:center.x+x, top:center.y+y});
				       });
				}
				
				function stepAngle()
				{
				    baseAngle++;
				    updateListPositions();
				}
				stepAngle();
				//var stepInterval = setInterval(stepAngle, 100);
				//setTimeout(function(){clearInterval(stepInterval);},2000);
				
				var prevX,prevY;
				var currX,currY;
				var mouseClicked = false;
				
				$(document).mousedown(function(e){
					prevX = currX = e.pageX; 
					prevY = currY = e.pageY; 
					mouseClicked = true;
				});
				
				$(document).mousemove(function(e){
					if(mouseClicked){
						prevX = currX;
						prevY = currY;
						
						currX = e.pageX;
						currY = e.pageY;
						
						if(currY > prevY){
							baseAngle++;
					    	updateListPositions();
						}else{
							baseAngle--;
					    	updateListPositions();
						}
					}
					
				});
				
				$(document).mouseup(function(e){
					prevX = e.pageX; 
					prevY = e.pageY; 
					mouseClicked = false;
				});
				
				
			});