用鼠标画出可移动的div
测试用例地址：http://jsfiddle.net/maplecumt/q78xZ/3/result/
这个测试用例的div移动出了点问题，因为是第一次使用jsfiddle网站，所以用的不是很熟悉，还希望高手指点。
具体的原理我就不多说了，直接贴代码。
html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ="http://www.w3.org/1999/xhtml"> <head> <title>Draw rectangle</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script src="jquery-1.6.2.min.js" type="text/javascript"></script> <script src="jquery.ui.core.js" type="text/javascript"></script> <script src="jquery.ui.widget.js" type="text/javascript"></script> <script src="jquery.ui.mouse.js" type="text/javascript"></script> <script src="jquery.ui.draggable.js" type="text/javascript"></script> <link href="catch.css" rel="stylesheet" type="text/css";charset=gb2312/> <script src="catch.js" type="text/javascript";charset=gb2312></script> <!--[if gte IE 7]> <style type="text/css"> </style> <![endif]--> </head> <body> <!-- header --> <div id="header"> <label>Draw!</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, sans-serif; margin: 0px;}#header{ width:150px; margin:0px auto; }#header label{ font-size:45px; font-weight:bolder;}#content{ width:90%; height:600px; margin:10px auto; border:1px solid blue;}.new_rect{ opacity: 0.7; -moz-opacity: 0.7; filter: alpha(opacity=70); -ms-filter: alpha(opacity=70); background:#A8CAEC; border:1px solid #3399FF; position:fixed; float:left;}.new_rect:hover{ cursor:move;}.mousedown{ -webkit-box-shadow:5px 5px 5px black; -moz-box-shadow:5px 5px 5px black; box-shadow:5px 5px 5px black; 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="<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++; }); }上传一个实例图片：
TAG:
