jquery实现div拖拽宽度

最新推荐文章于 2023-06-07 13:33:59 发布

w727ang

最新推荐文章于 2023-06-07 13:33:59 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/w727ang/article/details/9666699

版权

html 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

javascript

1 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

本文参考于：http://www.cnblogs.com/yelaiju/archive/2012/02/16/2354602.html

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

w727ang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现div拖拽宽度

本文参考于：http://www.cnblogs.com/yelaiju/archive/2012/02/16/2354602.html本例是个非常简单的div拖动，有需要的朋友可根据自己的需求，添加相应的代码。欢迎拍砖div width resize<script src="http://code.jquery.com/jquery-1.8.0.min.js" type="
复制链接

扫一扫