////////////////////////////////////////////////////////// $(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="<div class='new_rect' style='left:"+x_point+"px;top:"+y_point+"px;"+"width:"+new_width+"px;height:" +new_height+"px' name='"+num+"' title='第"+num+"个'></div>"; $(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++; }); }