js 实现左侧菜单拖动改变宽度

近期项目有这样一个需求，实现左侧菜单拖动改变宽度，并存放在浏览器中。

这里项目已经实现，保存一个简单demo，方便其他前端工作者参考和后期自己使用。

代码如下：

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>js实现左侧菜单拖动改变宽度</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		/* css样式不建议使用id选择器，此处为方便暂时使用, 请见谅 */
		* {margin: 0;padding: 0;}
		html,body {height: 100%;text-align: center;}
		body {position: relative;}
		.top {width: 100%;height: 88px;background-color: #ccc;}
		#left {position: absolute;top: 88px;right: 0;bottom: 0;left: 0;width: 220px;}
		#menu {width: 100%;height: 100%;}
		#drap-line {position: absolute;top: 0;right: 0;width: 4px;height: 100%;background-color: #999;cursor: e-resize;}
		#right {position: absolute;top: 88px;right: 0;bottom: 0;left: 220px;}
	</style>
</head>

<body>
	<div class="top">顶部导航</div>
	<div id="left">
		<div id="menu">
			<span>待拖拽的div</span>
		</div>
		<div id="drap-line"></div>
	</div>
	<div id="right">
		右边的div
	</div>
	<script>
		//获取dom函数
		function $(id) {
			return document.getElementById(id)
		}

		//设置最大/最小宽度
		var max_width = 400,
			min_width = 200;

		//获取dom
		var	drapLine = $('drap-line'),
			left = $('left'),
			right = $('right');

		//记录鼠标相对left盒子x轴位置
		var mouse_x = 0;

		//鼠标移动事件
		function mouseMove(e) {
			var e = e || window.event;
			var left_width = e.clientX - mouse_x;
			left_width = left_width < min_width ? min_width : left_width;
			left_width = left_width > max_width ? max_width : left_width;
			left.style.width = left_width + 'px';
			right.style.left = left_width + 'px';
		}
		//终止事件
		function mouseUp() {
			document.onmousemove = null;
			document.onmouseup = null;
			//localStorage设置
			localStorage.setItem('sliderWidth', left.style.width)
		}

		window.onload = function () {
			//localStorage读取
			var history_width = localStorage.getItem('sliderWidth');
			if (history_width) {
				left.style.width = history_width;
				right.style.left = history_width;
			}
			//绑定鼠标按下事件
			drapLine.onmousedown = function (e) {
				var e = e || window.event;
				//阻止默认事件
				e.preventDefault();
				mouse_x = e.clientX - left.offsetWidth;
				document.onmousemove = mouseMove;
				document.onmouseup = mouseUp;
			}
		}
	</script>
</body>

</html>

js 实现左侧菜单拖动改变宽度

猜你喜欢