我的resize 实现 javascript

06 Jul 2011 in Web前端 on javascript web 前端 - Hits()

var c = 0;

function log(txt) {
	var l = document.getElementById('log');
	c += 1;
	l.value += '[' + c + ']' + txt + '\n';
	l.scrollTop = 1000000;
}
var cox = {
	on : function(n, name, f, cp) {
		if (n.addEventListener) {
			n.addEventListener(name, f, cp);
		} else {
			if (n.attachEvent) {
				n.attachEvent('on' + name, f, cp);
			}
		}
	},
	un : function(n, name, f, cp) {
		if (n.removeEventListener) {
			n.removeEventListener(name, f, cp);
		} else {
			if (n.detachEvent) {
				n.detachEvent('on' + name, f, cp);
			}
		}
	}
};

function resizeable(ct, ops) {
	ops = ops ? ops : {};
	var rz, pos = [-1, -1], x, y, fx, fy;
	var off = ops.off ? ops.off : 5;
	var cstyle = document.body.style.cursor;

	function offset(a) {
		var argObj = a;
		var pixleft;

		pixleft = 0;
		while (argObj) {
			pixleft += argObj.offsetLeft;
			argObj = argObj.offsetParent;
		};

		var pixtop;
		argObj = a;
		pixtop = 0;
		while (argObj) {
			pixtop += argObj.offsetTop;
			argObj = argObj.offsetParent;
		};

		return [parseInt(pixleft), parseInt(pixtop)];
	}

	function start(e) {
		if ('absolute' !== ct.style.position) {
			return;
		}
		var oset = offset(ct);
		e = e || window.event;

		if (Math.abs(e.clientX - oset[0]) <= off) {
			pos[0] = 0;
		}
		if (Math.abs(e.clientX - oset[0] - ct.offsetWidth) <= off) {
			pos[0] = 1;
		}
		if (Math.abs(e.clientY - oset[1]) <= off) {
			pos[1] = 0;
		}
		if (Math.abs(e.clientY - oset[1] - ct.offsetHeight) <= off) {
			pos[1] = 1;
		}
		if (-1 === pos[0] && -1 === pos[1]) {
			pos = [-1, -1];
			log('not :' + e.clientX);
			return;
		}
		log('rz:' + pos);
		rz = true;
		ct.setCapture && ct.setCapture();
		if ((pos[0] === 0 && pos[1] === 0) || (pos[0] === 1 && pos[1] === 1)) {
			document.body.style.cursor = 'nw-resize';
		} else if ((pos[0] === 0 && pos[1] === 1)
				|| (pos[0] === 1 && pos[1] === 0)) {
			document.body.style.cursor = 'ne-resize';
		} else if (pos[1] === -1) {
			document.body.style.cursor = 'e-resize';
		} else if (pos[0] === -1) {
			document.body.style.cursor = 'n-resize';
		}

		x = e.clientX;
		y = e.clientY;
		fx = x + parseInt(ct.offsetWidth);
		fy = y + parseInt(ct.offsetHeight);
		cox.on(ct, "mousemove", move);
		cox.on(ct, 'mouseup', stop);

		if (ops.start) {
			ops.start(ct);
		}
	}

	function move(e) {
		if (!rz) {
			return;
		}
		e = e || window.event;

		var ox = e.clientX - x;
		var oy = e.clientY - y;
		var dir = 1 != Math.abs(pos[0]) || 1 != Math.abs(pos[1]);
		if (dir) {
			var nx = parseInt(ct.style.left) + ox;
			var ny = parseInt(ct.style.top) + oy;
			if (nx < fx) {
				ct.style.left = parseInt(ct.style.left) + ox;
			}
			if (ny < fy) {
				ct.style.top = parseInt(ct.style.top) + oy;
			}
		}
		dir = dir ? -1 : 1;
		var nw = parseInt(ct.style.width) + dir * ox;
		var nh = parseInt(ct.style.height) + dir * oy;
		if (0 < nw) {
			ct.style.width = nw;
		}
		if (0 < nh) {
			ct.style.height = parseInt(ct.style.height) + dir * oy;
		}

		x = e.clientX;
		y = e.clientY;

		if (ops.move) {
			ops.move(ct);
		}
	}

	function stop(e) {
		e = e || window.event;
		rz = false;
		pos = [-1, -1];
		ct.releaseCapture && ct.releaseCapture();
		document.body.style.cursor = cstyle;
		cox.un(ct, "mousemove", move);
		cox.un(ct, 'mouseup', stop);

		if (ops.stop) {
			ops.stop(ct);
		}
	}

	cox.on(ct, 'mousedown', start);
}

测试页面:

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>RESIZE</title>
		<script type="text/javascript" src="abc.js"></script>
		<script type="text/javascript">			
			function init()   
		    {   		    	
		        var t = document.getElementById('div');
		        resizeable(t);
		    }    
		    
		</script>
	</head>
	<body onLoad="init()">
		<div id="div" style="border: 2px solid red;width: 200px;height: 200px;position: absolute;left: 300px;top: 300px;">div</div>
		<br>
		<textarea id="test" rows="15" cols="50"></textarea>
		<textarea id="log" rows="15" cols="50"></textarea>
	</body>
</html>