具体原理我就不多说了，直接粘贴代码就可以了。

超文本标记语言代码：复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML L1-过渡。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head title绘制矩形/title meta http-equiv=' Content-Type ' Content=' text/html；charset=GB 2312/script src=' http : jquery-1。6 .2 .量滴js ' type=' text/JavaScript '/script script src=' http : jquery。ui。核心。js ' type=' text/JavaScript '/script script src=' http : jquery。ui。小部件。js ' type=' text/JavaScript '/script script src=' http 3360 jquery ' charset=GB 2312/script src=' http : catch。js ' type=' text/JavaScript '；charset=gb2312/script！-[如果gte IE 7]样式类型='text/css' /style！[endif]-/头身！-header-div id=' header ' labelDRAW！/label /div！- content - div id='content' /div！-bottom-div id=' bottom '/div/body/html CSS代码：复制代码代码如下： body { font-family : ' Helvetica Neue '，' Lucida Grande '，' Segoe UI '，Arial，Helvetica，Verdana，无衬线；余量： 0px} #标题{宽度width:150pxmargin:0px汽车；} #标题标签{ font-size :45 px字体粗细：加粗；} #内容{宽度：90%；高度：600 pxmargin:10px汽车；border:1px纯蓝；} .new _ rect { opa city 3360 0.7-moz-opa city 3360 0.7；filter: alpha(不透明度=70);-ms-filter: alpha(不透明度=70);背景# A8 caecacborder :1 px固体# 3399FF位置：固定；float:left}。new _ rect :悬停{光标：移动；} .鼠标向下{-网络工具包-盒子-阴影：5 px 5px 5px黑色；-moz-box-shadow:5px 5px 5px黑色；box-shadow:5px 5px 5px黑色；z指数：999;} js代码：复制代码代码如下：///////////////////////////////////////////////$(function(){//$(' div[title=new _ rect]')).click(function(){ alert(' click ')；});//$('.new _ rect’).可拖动();卓尔_ rect(' # content ')；}) /////////////////////////函数卓尔_rect(the_id){//theid表示用作画布的层var num=1；var x_down=0，y _ down=0；var new_width=0，new _ height=0；var x _ original=0，y _ origin=0；var original _ flag=true，down _ flag=falsevar x_point=0，y _ point=0；定义变量追加_ string var MouseDown=function(e){ Down _ flag=true；x _ down=e . page xy _ down=e.pageY//记录鼠标的当前坐标if(original_flag){//如果是第一次点击，把起始点的坐标记录到x _原件和y _原始中x _ original=e . pagexy _ original=e . pageyorginal _ flag=false } }；var Mousemove=function(e){ if(down _ flag){//鼠标有移动x _ down=e . pagexy _ down=e . pageyx _ point=x _ originaly _ point=y _ originalnew _ width=x _ down-x _ original；if(new_width0){//鼠标向左运动new _ width=-new _ width；x点=x向下；} new _ height=y _ down-y _ original；if(new_height0){ //鼠标向右运动new _ height=-new _ height；y点=y向下；} $(' div[name=' num ' ']').移除();//把前面的层删除，并在后面的代码中生成新的层append _ string=' div class=' new _ rect ' style=' left : ' x _ point ' px；top : ' y _ point ' px ' width : ' new _ width ' px h8 : ' new _ height ' px ' name=' num ' ' title='第数字个/div '；$(the_id).追加(追加_字符串)；} } $(the_id).bind('mousedown '，MouseDown)；$(the_id).bind('mousemove '，Mosemove)；//事件绑定$(the_id).mouseup(函数(e){//松开鼠标左键，初始化标志位down _ flag=false original _ flag=true $(' div[name=' num ' ']').可拖动();$(' div[name=' num ' ']').鼠标向下(函数(){ $(此)).addCLaSS('鼠标向下')；//添加阴影$(the_id).解除绑定(“mousedown”，mouse down)；$(the_id).解除绑定(' mousemove '，Mosemove)；//取消事件绑定});$(' div[name=' num ' ']').mouseup(function(){ $(this)).移除CLaSS('鼠标向下')；//删除阴影$(the_id).bind('mousedown '，MouseDown)；$(the_id).bind('mousemove '，Mosemove)；//事件绑定});数量；});} 上传一个实例图片