Перемещение элемента
 

Добрый день всем.
Битый час уже голову ломаю.
Хочу сделать переключатель, как на продукции apple(тянуть за ползунок и, при достижении прокрутки, например 20px, переводить его в другое положение).
Собственно, вот кнопка эта. (картинка прикреплена)

<style>
.switch{
	width:50px;
	height:20px;
	background-image:url(img/toggle/switch_bg.png);
}
.switch_intro{
	width:70px;
	height:16px;
	margin-top:2px;
	margin-left:4px;
	overflow:hidden;
	border-radius:17px;
}
#switch_top{
	margin-left:-29px;
}
</style>
<div class="switch">
                    	<div class="switch_intro">
                        	<img id="switch_top" src="img/toggle/switch_all.png"/>
                        </div>
</div>

Движение делаю с помощью jQuery-ui

function init(){
  $("#switch_top").draggable({
   containment:'parent',
   axis:'x'
  });
  return position.left; //не возвращает
  
}
init();

$("#switch_top").mouseup(function(){  
	alert(position.left);  //выводит начальную позицию
});

Но draggable() не меняет position.
Так вот вопрос- как все- таки получать значение на сколько я передвинул мышкой и сделать

if (передвижение == 20px){
$("#switch_top").css("marginLeft", "0px"); //передвинуть бегунок в правое положение
}

Или, если через draggable так не передать, то посоветуйте какое- нибудь простое решение.
Please help :help:

http://javascript.ru/ui/draganddrop

Изучите это, получите навык языка и решите свои проблемы