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 相关文章推荐
javascript级联下拉列表实例代码(自写)
May 10 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 Javascript
实现音乐播放器的代码(html5+css3+jquery)
Aug 04 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
jQuery实现表格元素动态创建功能
Jan 09 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
Mar 21 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
Jun 15 Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 Javascript
vue中对象数组去重的实现
Feb 06 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 设计模式系列之 specification规格模式
2016/01/10 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
详解PHP队列的实现
2019/03/14 PHP
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
Python实现全角半角字符互转的方法
2016/11/28 Python
Python实现简单的多任务mysql转xml的方法
2017/02/08 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
Django Admin设置应用程序及模型顺序方法详解
2020/04/01 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
python两个list[]相加的实现方法
2020/09/23 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
个人自我评价范文
2014/02/05 职场文书
家长学校培训材料
2014/08/20 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
中级会计大学生职业生涯规划书
2014/09/16 职场文书
颐和园导游词400字
2015/01/30 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
Python编程super应用场景及示例解析
2021/10/05 Python
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python