基于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 相关文章推荐
JavaScript脚本性能的优化方法
Feb 02 Javascript
jQuery 连续列表实现代码
Dec 21 Javascript
JavaScript Event学习第五章 高级事件注册模型
Feb 07 Javascript
jquery简单实现鼠标经过导航条改变背景图
Dec 17 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
element ui 对话框el-dialog关闭事件详解
Feb 26 Javascript
JS装饰器函数用法总结
Apr 21 Javascript
javascript随机变色实例代码
Oct 15 Javascript
vue项目中使用vue-layer弹框插件的方法
Mar 11 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 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
杏林同学录(九)
2006/10/09 PHP
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
用JS将搜索的关键字高亮显示实现代码
2013/11/08 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
js友好的时间返回函数
2016/08/24 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
浅谈Python中的数据类型
2015/05/05 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
学雷锋活动总结范文
2014/04/25 职场文书
好人好事演讲稿
2014/09/01 职场文书
表扬通报怎么写
2015/01/16 职场文书
孔繁森观后感
2015/06/10 职场文书
小组组名及励志口号
2015/12/24 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
Mysql超详细讲解死锁问题的理解
2022/04/01 MySQL
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA
python开发制作好看的时钟效果
2022/05/02 Python
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers