jquery实现div拖拽宽度示例代码

131 阅读 0 评论 87 点赞

我是靠谱客的博主合适小懒虫，最近开发中收集的这篇文章主要介绍jquery实现div拖拽宽度示例代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本例是个非常简单的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> 