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


Posted in Javascript onSeptember 06, 2012

具体的原理我就不多说了,直接贴代码。
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++; 
}); 
}

上传一个实例图片:
基于jquery的用鼠标画出可移动的div
Javascript 相关文章推荐
发现的以前不知道的函数
Sep 19 Javascript
javascript 动态设置已知select的option的value值的代码
Dec 16 Javascript
jQuery之网页换肤实现代码
Apr 30 Javascript
Javascript 遍历页面text控件详解
Jan 06 Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
vue实现表格数据的增删改查
Jul 10 Javascript
Vue2.0设置全局样式(less/sass和css)
Nov 18 Javascript
基于vue2.0实现简单轮播图
Nov 27 Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 Javascript
js防止表单重复提交实现代码
Sep 05 #Javascript
javascript面向对象入门基础详细介绍
Sep 05 #Javascript
说说JSON和JSONP 也许你会豁然开朗
Sep 02 #Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 #Javascript
Javascript中的delete介绍
Sep 02 #Javascript
JS判断当前日期是否大于某个日期的实现代码
Sep 02 #Javascript
Javascript this 的一些学习总结
Aug 31 #Javascript
You might like
PHP的5个安全措施小结
2012/07/17 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
js版本A*寻路算法
2006/12/22 Javascript
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
js实现div模拟模态对话框展现URL内容
2016/05/27 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
用Python的urllib库提交WEB表单
2009/02/24 Python
八大排序算法的Python实现
2021/01/28 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
python怎么删除缓存文件
2020/07/19 Python
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
优秀广告词大全
2014/03/19 职场文书
出差报告格式模板
2014/11/06 职场文书
优秀大学生自荐信
2015/03/26 职场文书
交通事故被告答辩状
2015/05/22 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript