某公司的一道js面试题

最新推荐文章于 2025-08-09 23:51:15 发布

最新推荐文章于 2025-08-09 23:51:15 发布 · 180 阅读

文章标签：

#面试 #prototype #J# #JavaScript #ViewUI

W3C 专栏收录该内容

9 篇文章

订阅专栏

本文深入解析了一道JavaScript面试题，详细介绍了如何实现类似可拖动表格的功能，包括创建拖动组件、定义表格结构以及实现拖动逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
	<title>drag example</title>
<style>
	*{
		margin:0;
		padding:0;
	}
	body{
		text-align:center;
	}
	.mil{
		text-align:center;
		line-height:96px;
	}

</style>
</head>
<body>
	<div id="main" style="position:relative;margin:0 auto;width:500px;height:500px;border:1px solid red;">
		
	</div>
</body>
</html>
<script type="text/javascript">

function $(id){return document.getElementById(id);}
var row = 4;  
var col = 4;
var width = 96;
var height = 96;
var isIE = false;
var isFF = false;
var arr = [];
var tmp_from = [];
var tmp_to = [];

function DragClass(id,x,y){  //drag class
	this.id = id;
	this.posX = x;
	this.posY = y;
	this.type = 0; //1:col 2:row 3:table 4:head
	this.obj = null;
	this.color = null;
	this.px = null;
	this.py = null;
}
DragClass.prototype.init = function(){
	if(this.type == 1){  
		this.color = "blue";
		this.obj.style.background = this.color;
		this.obj.style.color = "yellow";
		this.start();
	}
	else if(this.type == 2){
		this.color = "green";
		this.obj.style.background = this.color;
		this.obj.style.color = "yellow";
		this.start();
	}
	else if(this.type == 3){
		this.color = "red";
		this.obj.style.background = "red";
		this.obj.style.color = "yellow";
		this.start();
	}
	else{
		this.color = "black";
		this.obj.style.background = this.color;
		this.obj.innerHTML = "固定表头";
		this.obj.style.color = 'white';
	}
};

DragClass.prototype.start = function(){
	var self = this;
	this.obj.onmousedown = function(e){
		e = e || window.event;	

		if(self.type == 3){
			self.px = get_xy(e)[0]-self.posX;
			self.py = get_xy(e)[1]-self.posY;	
			self.changeStyle();
		}
		else if(self.type == 1){
			tmp_from = get_tmp(1,self.id.split('_')[1]);
			for(var i in tmp_from){
				tmp_from[i].px = get_xy(e)[0]-tmp_from[i].posX;
				tmp_from[i].py = get_xy(e)[1]-tmp_from[i].posY;
				tmp_from[i].changeStyle();
			}
		}
		else if(self.type == 2){
			tmp_from = get_tmp(2,self.id.split('_')[0]);
			for(var i in tmp_from){
				tmp_from[i].px = get_xy(e)[0]-tmp_from[i].posX;
				tmp_from[i].py = get_xy(e)[1]-tmp_from[i].posY;
				tmp_from[i].changeStyle();
			}
		}

		document.onmousemove = function(e){
			self.move(e);
			return false;
		};
		document.onmouseup = function(e){
			self.stop(e);
		};
		return false;
	};
}

DragClass.prototype.move = function(e){
	if(this.type == 3){
		this.obj.style.left = (get_xy(e)[0]-this.px)+'px';
		this.obj.style.top =  (get_xy(e)[1]-this.py)+'px';
	}
	else if(this.type == 1 || this.type == 2){
		for(var i in tmp_from){
			tmp_from[i].obj.style.left = (get_xy(e)[0]-tmp_from[i].px)+'px';
			tmp_from[i].obj.style.top = (get_xy(e)[1]-tmp_from[i].py)+'px';
		}
	}
}
DragClass.prototype.stop = function(e){
	this.check(get_xy(e)[0],get_xy(e)[1]);
	if(this.type == 3){
		this.changeStyleBack();
	}
	else{
		for(var i in tmp_from){		
			tmp_from[i].changeStyleBack();
		}
	}
	
	document.onmousemove = null;
	document.onmouseup = null;
	
}

DragClass.prototype.changeStyle = function(){
	this.obj.style.background = "lightgray";
	this.obj.style.zIndex = "1";
}
DragClass.prototype.changeStyleBack = function(){
	this.obj.style.background = this.color;
	this.obj.style.zIndex = '0';
}
DragClass.prototype.check = function(x,y){  //check single
	var flag = true;
	var flags = true;
	for(var key in arr){
		var i = arr[key].id.split("_")[0];
		var j = arr[key].id.split("_")[1];
		if(this.type == 3 && arr[key].type == 3){
			if(x<30+j*100+width && x>30+j*100 && y<30+i*100+height && y>30+i*100){
				this.table_each(arr[key]);
				flag = false;
				break;
			}
		}
		else if(this.type == 1 && arr[key].type == 1){
			if(x<30+j*100+width && x>30+j*100 && y<30+i*100+height && y>30+i*100){
				tmp_to = get_tmp(1, j);
				if(tmp_to.length == tmp_from.length){
					//alert('ok');
					for(var ii=0; ii<tmp_to.length; ii++){
						tmp_from[ii].table_each(tmp_to[ii]);
					}
				}
				flags = false;
				break;
			}
		}
		else if(this.type == 2 && arr[key].type == 2){
			if(x<30+j*100+width && x>30+j*100 && y<30+i*100+height && y>30+i*100){
				tmp_to = get_tmp(2, i);
				if(tmp_to.length == tmp_from.length){
					//alert('ok');
					for(var ii=0; ii<tmp_to.length; ii++){
						tmp_from[ii].table_each(tmp_to[ii]);
					}
				}
				flags = false;
				break;
			}
		}
	}
	if(flag){
		this.obj.style.left = this.posX + 'px';
		this.obj.style.top = this.posY + 'px';
	}
	if(flags){
		for(var x in tmp_from){
			tmp_from[x].obj.style.left = tmp_from[x].posX+'px';
			tmp_from[x].obj.style.top = tmp_from[x].posY+'px';
		}
	}
}

DragClass.prototype.table_each = function(o){  //交换
	var px = this.posX;
	var py = this.posY;
	var id = this.id;
	this.posX = o.posX;
	this.posY = o.posY;
	this.id = o.id;
	o.id = id;
	o.posX = px;
	o.posY = py;
	this.obj.style.left = this.posX + 'px';
	this.obj.style.top = this.posY + 'px';
	o.obj.style.left = o.posX+'px';
	o.obj.style.top = o.posY+'px';
}

function init(){
	var frag = document.createDocumentFragment();  //create fragment
	for(var i=0; i<row; i++){
		for(var j=0; j<col; j++){
			var span = document.createElement("span");
			span.className = "mil";
			span.style.position = "absolute";
			span.style.width = width+'px';
			span.style.height = height+'px';
			span.style.top = 30+i*100+'px';
			span.style.left = 30+j*100+'px';
			span.id = i+'_'+j;
			var obj = new DragClass(span.id, 30+j*100, 30+i*100);
			obj.obj = span;				
			arr.push(obj);
			if(i==0 && j==0){  //head
				obj.type = 4;
			}
			else if(i==0){  // col head
				span.innerHTML = "列头"+j;
				obj.type = 1;
			}
			else if(j==0){  // row head
				span.innerHTML = "行头"+i;
				obj.type = 2;
			}
			else{
				span.innerHTML = "表格"+i+"_"+j;			
				obj.type = 3;
			}
			obj.init();
			frag.appendChild(span);
		}
	} 
	$('main').appendChild(frag);
}

function get_tmp(type, i){
	var tmp = [];
	for(var x in arr){
		if(type == 1){
			if(arr[x].id.split('_')[1] == i){
				tmp.push(arr[x]);
			}
		}
		else{
			if(arr[x].id.split('_')[0] == i)
				tmp.push(arr[x]);	
		}
	}
	tmp.sort(function(a,b){   //asc sort
		var ax = a.id.split('_')[0];
		var ay = a.id.split('_')[1];
		var bx = b.id.split('_')[0];
		var by = b.id.split('_')[1];
		if(ax < bx || ay < by)
			return 1;
		else
			return -1;
	})
	return tmp;
}

function get_xy(e){  //get mouse
	e = e || window.event;
	var arr = [];
	var x = e.pageX || e.clientX;
	var y = e.pageY || e.clientY;
	x = x-$('main').offsetLeft;
	arr[0] = x;
	arr[1] = y;
	return arr;
}


window.onload = function(){
	init();
}
</script>

某公司的一道js面试题，要实现一种类似于可拖动表格的功能！