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 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
一些mootools的学习资源
Feb 07 Javascript
异步动态加载JS并运行(示例代码)
Dec 13 Javascript
javascript实现完美拖拽效果
May 06 Javascript
javascript的理解及经典案例分析
May 20 Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 Javascript
jQuery中的100个技巧汇总
Dec 15 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 Javascript
浅谈layui 表单元素的选中问题
Oct 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继承的一个应用
2011/09/06 PHP
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
Linux编译升级php的详细方法
2013/11/04 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
浅析JS运动
2015/12/28 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
Python 流程控制实例代码
2009/09/25 Python
Python复数属性和方法运算操作示例
2017/07/21 Python
python实现八大排序算法(1)
2017/09/14 Python
pandas通过loc生成新的列方法
2018/11/28 Python
详解python编译器和解释器的区别
2019/06/24 Python
详解如何修改python中字典的键和值
2020/09/29 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
《鲁班和橹板》教学反思
2014/04/27 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js