jquery实现div拖拽宽度示例代码


Posted in Javascript onJuly 31, 2013

本例是个非常简单的div拖动,有需要的朋友可根据自己的需求,添加相应的代码。欢迎拍砖

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html style="height:100%;"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>div width resize</title> 
<!--引用jquery--> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js" 
type="text/javascript"></script> 
<script type="text/javascript"> 
function bindResize(el) 
{ 
//初始化参数 
var els = document.getElementById('menu').style; 
//鼠标的 X 和 Y 轴坐标 
x = 0; 
//邪恶的食指 
$(el).mousedown(function (e) 
{ 
//按下元素后,计算当前鼠标与对象计算后的坐标 
x = e.clientX - el.offsetWidth - $("#menu").width(); 
//在支持 setCapture 做些东东 
el.setCapture ? ( 
//捕捉焦点 
el.setCapture(), 
//设置事件 
el.onmousemove = function (ev) 
{ 
mouseMove(ev || event); 
}, 
el.onmouseup = mouseUp 
) : ( 
//绑定事件 
$(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp) 
); 
//防止默认事件发生 
e.preventDefault(); 
}); 
//移动事件 
function mouseMove(e) 
{ 
//宇宙超级无敌运算中... 
els.width = e.clientX - x + 'px'; 
} 
//停止事件 
function mouseUp() 
{ 
//在支持 releaseCapture 做些东东 
el.releaseCapture ? ( 
//释放焦点 
el.releaseCapture(), 
//移除事件 
el.onmousemove = el.onmouseup = null 
) : ( 
//卸载事件 
$(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp) 
); 
} 
} 
var divResize=function(){ 
var totalHeight=$("html").height(); 
console.log(totalHeight); 
var topHeight=$("#top").height() 
$("#menu").height(totalHeight-topHeight); 
$("#rightbar").height(totalHeight-topHeight); 
} 
$(function() { 
divResize(); 
$(window).resize(divResize); bindResize(document.getElementById('rightbar')); 
}); 
</script> 
<style type="text/css"> 
.content { 
width: 200px; 
background: #f1f1f1; 
text-align: center; 
border-color: #CCCCCC; 
border-style: solid; 
border-width: 0 1px; 
} 
</style> 
</head> 
<body style="padding: 0; margin: 0;"> 
<%-- 
<table style="height: 100%"> 
<tr> 
<td id="menu" class="content"></td> 
<td id="rightbar" 
style="width: 2px; background: #cccccc; cursor: e-resize;"></td> 
</tr> 
</table> 
--%> 
<div> 
<div id="top" style="width: 100%; height: 80px;"></div> 
<div style="float: left;" id="menu" class="content"> 
<span>待拖拽的div</span> 
</div> 
<div id="rightbar" 
style="width: 2px; background: #cccccc; cursor: e-resize; float: left;"></div> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
Javascript学习笔记一 之 数据类型
Dec 15 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
详解AngularJS控制器的使用
Mar 09 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
jQuery滚动新闻实现代码
Jun 26 Javascript
jquery拼接ajax 的json和字符串拼接的方法
Mar 11 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
react-navigation之动态修改title的内容
Sep 26 Javascript
vue实现输入一位数字转汉字功能
Dec 13 Javascript
Vue实现简单计算器案例
Feb 25 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
Jul 31 #Javascript
javascript获取下拉列表框当中的文本值示例代码
Jul 31 #Javascript
禁用页面部分JavaScript方法的具体实现
Jul 31 #Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 #Javascript
选择器中含有空格在使用示例及注意事项
Jul 31 #Javascript
在表单提交前进行验证的几种方式整理
Jul 31 #Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 #Javascript
You might like
PHP分页显示制作详细讲解
2006/12/05 PHP
php面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
jquery插件之文字间歇自动向上滚动效果代码
2016/02/25 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
简单实现nodejs上传功能
2017/01/14 NodeJs
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
Python构建网页爬虫原理分析
2017/12/19 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
python 如何区分return和yield
2020/09/22 Python
用python批量下载apk
2020/12/29 Python
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
总裁秘书岗位职责
2013/12/04 职场文书
马智宇结婚主持词
2014/04/01 职场文书
家长写给孩子的评语
2014/04/18 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
书法大赛策划方案
2014/06/04 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
管理失职检讨书
2015/05/05 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL
MySQL查询日期时间
2022/05/15 MySQL