防止出界的拖动层

请高手帮帮忙
想实现以ID='rq'的这个DIV为边界，在这个范围内随意拖动ID=‘tc’这个层的效果。
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.c01{height:50px;border:1px solid #f00;width:500px}
.c02{height:50px;border:1px solid #f00;margin-top:10px;position:relative;width:500px}
.c03{width:30px;height:30px;border:1px solid #0f0;position:absolute;left:10px;top:10px;cursor:move;}
</style>
</head>
<body>
<div class="c01"></div>
<div class="c02" id="rq"><!--容器-->
<div class="c03" id="tc" style="width:30px;height:30px;border:1px solid #0f0;position:absolute;left:10px;top:10px;cursor:move;"></div><!--拖动层-->
</div>
容器坐标<input type="text" value="" id="rqtxt">
拖动层坐标<input type="text" value="" id="xx">
<input type="text" value="" id="txt" onkeyup="checkInput();">
</body>
</html>