<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<style type="text/css">
#container { position:absolute; top:200px; left:200px; width:400px; height:400px; background:#ddd; border:1px solid #999; }
#slider { position:relative; height:40px; width:40px; background:red; left:180px; top:-20px; }
</style>
<div id='container'> <div id='slider'> </div> </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
<script type="text/javascript">
(function () {
var radius = 200;
var mdown = false;
var parentOffset = $('#container').offset();
$('#container')
.mousedown(function (e) { mdown = true; })
.mouseup(function (e) { mdown = false; })
.mousemove(function (e) {
if (mdown) {
var center = { x: parentOffset.left + 200, y: parentOffset.top + 200 };
var mouse = { x : e.clientX, y : e.clientY };
var dx = mouse.x - center.x;
var dy = mouse.y - center.y;
var scale = radius / Math.sqrt(dx * dx + dy * dy);
var slider = { x : dx * scale + center.x, y : dy * scale + center.y
};
$('#slider').css({
left: -20 - parentOffset.left + slider.x + "px",
top: -20 - parentOffset.top + slider.y + "px"
});
}
});
})();
</script>
</body>
</html>