div实现拖拽效果，宽度发生变化

来源：互联网发布：simulink 电气端口编辑：程序博客网时间：2024/05/29 13:17

最近项目中，需要写个能够拖拽的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><div id="right">右边的div</div></body></html>

0 0