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 相关文章推荐
详解jQuery插件开发中的extend方法
Nov 19 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
ztree简介_动力节点Java学院整理
Jul 19 Javascript
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
React教程之封装一个Portal可复用组件的方法
Jan 02 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
gulp构建小程序的方法步骤
May 31 Javascript
JS实现图片幻灯片效果代码实例
May 21 Javascript
ES6 解构赋值的原理及运用
May 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/10/13 PHP
destoon官方标签大全
2014/06/20 PHP
PHP中Session可能会引起并发问题
2015/06/26 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
Django自定义用户认证示例详解
2018/03/14 Python
Python函数返回不定数量的值方法
2019/01/22 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
python实现邮件自动发送
2019/08/10 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
python中常见错误及解决方法
2020/06/21 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
电子商务专业学生的学习自我评价
2013/10/27 职场文书
管理建议书范文
2014/05/13 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
vue2实现provide inject传递响应式
2021/05/21 Vue.js
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python