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 相关文章推荐
子页向父页传值示例
Nov 27 Javascript
一个不错的仿携程自定义数据下拉选择select
Sep 01 Javascript
jQuery实现的分页功能示例
Jan 22 Javascript
基于jQuery实现文字打印动态效果
Apr 21 jQuery
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
谈谈JS中的!!
Dec 07 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
js replace 全局替换的操作方法
Jun 12 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
Jun 19 Javascript
Vue中JS动画与Velocity.js的结合使用
Feb 13 Javascript
如何用JavaScript学习算法复杂度
Apr 30 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
phpmyadmin操作流程
2006/10/09 PHP
php获取网页内容方法总结
2008/12/04 PHP
discuz7 phpMysql操作类
2009/06/21 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
javascript 函数调用规则
2009/08/26 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
js计算精度问题小结
2013/04/22 Javascript
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
2018/12/04 jQuery
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
医护人员英文求职信范文
2013/11/26 职场文书
财务工作个人求职的自我评价
2013/12/19 职场文书
网站创业计划书
2014/04/30 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
医院见习报告范文
2014/11/03 职场文书
525心理健康活动总结
2015/05/08 职场文书
学雷锋感言
2015/08/03 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python
5道关于python基础 while循环练习题
2021/11/27 Python