(原创)自己实现的一个比较通用的拖动条

最新推荐文章于 2024-07-11 03:56:42 发布

最新推荐文章于 2024-07-11 03:56:42 发布 · 98 阅读

文章标签：

#prototype #Microsoft

本文介绍了一个使用JavaScript实现的拖动条组件，支持水平和垂直拖动，并演示了如何控制相邻区域的尺寸变化。

写了一个拖动条的js类 . 只测试了左右拖动,效果还可以.


function Bar(type, id, IdA, IdB) {
	// 上下还是左右
	this.type = type;
	this.moveable = false;
	this.isIE = (navigator.appName == "Microsoft Internet Explorer"
			? true
			: false);
	this.domObj = document.getElementById(id);
	if (IdA) {
		this.areaA = document.getElementById(IdA);
	} else {
		this.areaA = this.domObj.previousSibling;
	}
	if (IdB) {
		this.areaB = document.getElementById(IdB);
	} else {
		this.areaB = this.domObj.nextSibling;
	}
	// 初始坐标
	this.X = this.domObj.offsetLeft;
	this.Y = this.domObj.offsetTop;
	// 隐藏标志
	this.areaAHideFlag = false;
	// 页面宽高
	this.clientWidth = document.body.clientWidth;
	this.clientHeight = document.body.clientHeight;
}
// 鼠标起来
Bar.prototype.doMouseUp = function() {
	this.endListen();
}
// 鼠标按下
Bar.prototype.doMouseDown = function() {
	this.startListen();
}
// 鼠标移动
Bar.prototype.doMouseMove = function() {
	// 判断type
	var X, Y, tmp;
	// 上下
	if (!this.moveable) {
		// 不可移动,退出
		return;
	}
	if (this.type == "v") {
		Y = getEvent().clientY;
		tmp = 500;

		if (X <= 100) {
			X = 110;
			this.doMouseUp();
		}
		if (X > tmp) {
			X = tmp - 10;
			this.doMouseUp();
		}
		this.domObj.style.top = Y;
		this.areaA.style.height = Y;
		this.areaB.style.top = this.domObj.style.top + this.domObj.offsetHeight;
		this.areaB.style.height = this.clientHeight - this.areaB.offsetTop;
	}
	// 左右
	if (this.type == "h") {
		X = getEvent().clientX;
		tmp = 500;

		if (X <= 100) {
			X = 110;
			this.doMouseUp();
		}
		if (X > tmp) {
			X = tmp - 10;
			this.doMouseUp();
		}
		this.domObj.style.left = X;
		this.areaA.style.width = X;
		this.areaB.style.left = X + this.domObj.offsetWidth;
		this.areaB.style.width = this.clientWidth - this.areaB.offsetLeft;
	}

}
// 开始监听
Bar.prototype.startListen = function() {
	if (this.isIE) {
		this.domObj.setCapture();
	} else {
		document.captureEvents(Event.MOUSEMOVE);
	}
	if (this.type == "h") {
		this.X = getEvent().clientX;
	}
	if (this.type == "v") {
		this.Y = getEvent().clientY;
	}
	this.moveable = true;
}
// 结束监听
Bar.prototype.endListen = function() {
	if (this.isIE) {
		this.domObj.releaseCapture();
	} else {
		document.releaseEvents(Event.MOUSEMOVE);
	}
	this.moveable = false;
}
Bar.prototype.hide = function() {
	// 如果没有隐藏左侧 或上侧 ,将左侧或上侧 隐藏
	this.areaA.style.display = "none";
	this.domObj.style.left = 0;
	this.areaB.style.left = this.domObj.offsetWidth;
	this.areaB.style.width = this.clientWidth - this.areaB.offsetLeft;
	this.areaAHideFlag = true;
	// 隐藏之后移除this.domObj的监听事件
}
Bar.prototype.show = function() {
	this.areaA.style.display = "block";
	this.domObj.style.left = this.areaA.offsetWidth;
	this.areaB.style.left = this.domObj.offsetLeft + this.domObj.offsetWidth;
	this.areaB.style.width = this.clientWidth - this.areaB.offsetLeft;
	this.areaAHideFlag = false;
	// 显示之后添加this.domObj的监听事件
}
//showOrHide函数在外部写,根据flag调用hide或者是show方法