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 相关文章推荐
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
JavaScript获取网页表单action属性的方法
Apr 02 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
JS实现六位字符密码输入器功能
Aug 19 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 Javascript
javaScript基础详解
Jan 19 Javascript
vue仿element实现分页器效果
Sep 13 Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 13 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 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
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
PHP实现的自定义数组排序函数与排序类示例
2016/11/18 PHP
PHP实现类似于C语言的文件读取及解析功能
2017/09/01 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
用javascript实现计算两个日期的间隔天数
2007/08/14 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
Django之模板层的实现代码
2019/09/09 Python
Python正则表达式如何匹配中文
2020/05/27 Python
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
在校学生职业规划范文
2014/01/08 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
董事长岗位职责
2015/02/13 职场文书
python-for x in range的用法(注意要点、细节)
2021/05/10 Python
Python语言内置数据类型
2022/02/24 Python
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android