div框,左右拖动


<script type="text/javascript"> function bindResize(el){ //初始化参数 var els = document.getElementById('admin-offcanvas').style; //鼠标的 X 和 Y 轴坐标 var x = 0; //邪恶的食指 $(el).mousedown(function (e){ //按下元素后,计算当前鼠标与对象计算后的坐标 x = e.clientX - el.offsetWidth - $("#admin-offcanvas").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'; var left = e.clientX - x + 'px'; $("#rightbar").attr("style","width: 5px;height: 100%;background: #cecece; z-index:999;cursor:e-resize;left: "+left+";position: absolute;"); $("#admin_content").attr("style","position: absolute;left: "+left+";top: 0;right: 0;bottom: 0;"); } //停止事件 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(); $("#admin-offcanvas").height(totalHeight-topHeight); $("#rightbar").height(totalHeight-topHeight); }; $(function() { divResize(); $(window).resize(divResize); bindResize(document.getElementById('rightbar')); }); </script>
            <%--div 1--%>
            <div class="admin-sidebar am-offcanvas" id="admin-offcanvas" style="position: absolute;left: 0;top: 0;width: 20%;bottom: 0px;">
            内容div 1
            </div>
            <%--移动边框--%>
            <div id="rightbar" style="width: 5px;height: 100%;background: #cecece; cursor: e-resize;z-index:999;left: 330px;position: absolute;"></div>
            <%--div 2--%>
            <div class="admin-content" id="admin_content" style="position: absolute;left: 20%;top: 0;right: 0;bottom: 0;">
            内容div 2
            </div>

猜你喜欢

转载自www.cnblogs.com/czq520/p/12082376.html