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>
jquery实现div拖拽宽度示例代码
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@