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

163 阅读 0 评论 108 点赞

我是靠谱客的博主想人陪小土豆，最近开发中收集的这篇文章主要介绍基于jquery的用鼠标画出可移动的div，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

复制代码代码如下:

 
<!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> 
<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++; 
}); 
} 