基于jquery的用鼠标画出可移动的div_jquery

具体原理我就不多说了，直接贴代码。
html代码：

复制代码代码如下：

ontent-Type" content="text/html; charset=gb2312" />>
<脚本 src="jquery-1.6.2.min.js" type="text/javascript">
<脚本 src="jquery.ui.core.js" type="text/javascript">
<脚本 src="jquery.ui.widget.js" type="text/javascript">
<脚本 src="jquery.ui.mouse.js" type="text/javascript">
<脚本 src="jquery.ui.draggable.js" type="text/javascript">
/>



<身体>

画画！标签>

css代码：

复制代码代码如下：

body
{
字体系列：“Helvetica Neue”、“Lucida Grande”、“Segoe UI”、Arial、Helvetica、Verdana、sans-serif；
边距：0px；
}
#header
{
宽度：150px;
边距：0px 自动；
}
#标题标签
{
字体大小：45px;
字体粗细：加粗；
}
#内容
{
宽度：90%;
高度：600px；
边距：10px 自动；
边框：1px纯蓝色；
}
.new_rect
{
不透明度：0.7；
-moz-不透明度：0.7；
过滤器：alpha（不透明度=70）；
-ms-filter: alpha(不透明度=70);
背景：#A8CAEC；
边框：1px实线#3399FF；
位置：固定；
浮动：左；
}
.new_rect:hover{
光标:移动;
}
.mousedown{
-webkit-box-shadow:5px 5px 5px 黑色;
-moz-box-shadow：5px 5px 5px 黑色；
盒子阴影：5px 5px 5px 黑色；
z-index:999;
}

js代码：

复制代码代码如下：

//////////////////////////////////////////////////////////
$(function () {
//$("div[title=new_rect]").click(function(){alert("click");});
//$(".new_rect").draggable();
drow_rect("#content");
})
/////////////////////////////////////////////////////////
function drow_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_original=0;
var original_flag=true,down_flag=false;
var x_point=0,y_point=0;
var append_string;
var MouseDown=function(e){
down_flag=true;
x_down=e.pageX;
y_down=e.pageY;//记录鼠标的当前坐标
if(original_flag){//如果是第一次点击,把起始点的坐标记录到 x_original 和 y_original中
x_original=e.pageX;
y_original=e.pageY;
original_flag=false;
}
};
var MouseMove=function(e){
if(down_flag){//鼠标有移动
x_down=e.pageX;
y_down=e.pageY;
x_point=x_original;
y_point=y_original;
new_width=x_down-x_original;
if(new_width<0){//鼠标向左运动
new_width=-new_width;
x_point=x_down;
}
new_height=y_down-y_original;
if(new_height<0){ //鼠标向右运动
new_height=-new_height;
y_point=y_down;
}
$("div[name='" num "']").remove();//把前面的层删除，并在后面的代码中生成新的层
append_string="

";
$(the_id).append(append_string);
}
}
$(the_id).bind("mousedown",MouseDown);
$(the_id).bind("mousemove",MouseMove);//事件绑定
$(the_id).mouseup(function(e){//松开鼠标左键，初始化标志位
down_flag=false;
original_flag=true;
$("div[name='" num "']").draggable();
$("div[name='" num "']").mousedown(function(){
$(this).addClass("mousedown");//添加阴影
$(the_id).unbind("mousedown",MouseDown);
$(the_id).unbind("mousemove",MouseMove);//取消事件绑定
});
$("div[name='" num "']").mouseup(function(){
$(this).removeClass("mousedown");//删除阴影
$(the_id).bind("mousedown",MouseDown);
$(the_id).bind("mousemove",MouseMove);//事件绑定
});
num ;
});
}

上传一个实例图片：