<!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=gb2312" />
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
#box{width:500px;height:500px;margin:200px auto;position:relative;border:1px solid #ccc;border-left:2px solid #ccc;}
.float-box{width:100px;height:100px;background:#000;color:#fff;position:absolute;top:20px;left:10px;cursor:move;z-index:2;border:2px solid #ccc;border-right:10px solid #fc0;}
.float-box1{width:200px;height:200px;background:#f30;color:#fff;position:absolute;top:0;left:200px;cursor:move;border-top:10px solid #000;}
</style>
</head>
<body>
<div id="box">
<div class="float-box"></div>
<div class="float-box1"></div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="JQ.MoveBox.js"></script>
<script type="text/javascript">
$(".float-box").MoveBox();
$(".float-box1").MoveBox({out:true});
</script>
</body>
</html>