基于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 相关文章推荐
JS小框架 fly javascript framework
Nov 26 Javascript
javascript prototype原型操作笔记
Dec 07 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 Javascript
JS判断当前日期是否大于某个日期的实现代码
Sep 02 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
javascript跨浏览器的属性判断方法
Mar 16 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
js显示文本框提示文字的方法
May 07 Javascript
javascript日期计算实例分析
Jun 29 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 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
Search Engine Friendly的URL设计
2006/10/09 PHP
php下封装较好的数字分页方法
2010/11/23 PHP
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
解析zend Framework如何自动加载类
2013/06/28 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
python虚拟环境virtualenv的使用教程
2017/10/20 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
写自荐信要注意什么
2013/12/26 职场文书
大专会计自我鉴定
2014/02/06 职场文书
经理助理岗位职责
2014/03/05 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
初婚初育证明范本
2014/11/24 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书