表格拖动

最新推荐文章于 2023-08-17 23:39:34 发布
原创最新推荐文章于 2023-08-17 23:39:34 发布 · 527 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#class #function #table #string #url #ie
HTML5+CSS3 同时被 2 个专栏收录
7 篇文章
订阅专栏
Javascript
1 篇文章
订阅专栏
<html>
	<body>
<table id='sortTable' cellspacing="0" cellpadding="0">
	<tr>
		<td class='thead'><font class="resizeDivClass" id='dragBlock1'> </font>
			数字
			</td>
		<td class='thead'><font class="resizeDivClass" id='dragBlock2'> </font>
			英文
			</td>
		<td class='thead'><font class="resizeDivClass" id='dragBlock3'> </font>
			汉字
			</td>
		<td class='thead'><font class="resizeDivClass" id='dragBlock4'> </font>
			标题
			</td>
	</tr>
	<tr>
		<td>1</td>
		<td>a</td>
		<td>
			<div class='hiddenLongChar'>
			这是一段十分非常很特别忒长的长字段，当你改变表格宽度后，就会发现在表格外面的内容已经变成了.....................
			</div>	
		</td>
		<td>Data1</td>
	</tr>			
	<tr>
		<td>31212 312312 33123</td>
		<td>this is a long long string </td>
		<td>哦</td>
		<td>Data2</td>
	</tr>			
	<tr>
		<td>8</td>
		<td>c</td>
		<td>饿</td>
		<td>Data3</td>	
	</tr>			
	<tr>
		<td>4</td>
		<td>d</td>
		<td>一</td>
		<td>这是一段没有进行溢出处理的长字段，当你改变表格宽度后，有可能会把表格变的很长很难看</td>
	</tr>
		</table>
<style>
			/* 溢出处理样式 */
			.hiddenLongChar{
				width:300px;
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
			}

	/* 拖动块样式 */
	.resizeDivClass{
		/* 绿色背景色 */
		/* background:#00FF00; 删除*/
		width:18px;
		z-index:999;
		position:relative;
		float:right;
		left:15px;
		cursor:e-resize;
		height:100%;
	}
	/* 定义页面整体样式 */
	body{
		margin:0;
		padding:0;
		background:#f1f1f1;
		/* 分别处理IE和FF下的字体样式 */
		font-size:13px;
		*font:70% Arial, Helvetica, sans-serif; 
		color:#555;
		/* 页面内容溢出时，自动出现滚动条 */
		overflow:auto;
	}
	/* 定义table内的字体样式 */
	table, td{
		font:100% Arial, Helvetica, sans-serif; 	
	}
	/* 定义table样式 */
	table{
		border-collapse:collapse;
		margin:1em 25%;
	}
	/* 定义td的对齐方式、内边距等 */
	td{
		text-align:left;
		padding:.5em;
		border:1px solid #fff;
	}
	/* 定义表头所使用的背景图片 */
	.thead{
		background:#328aa4 url(tr_back.gif) repeat-x;
		color:#fff;
		text-align:center;
	}
	/* 定义td的背景色 */
	td{
		background:#e5f1f4;
	}
</style>

<script>
	//获取所有拖动块引用
	var dragBlock1 = document.getElementById('dragBlock1');
	var dragBlock2 = document.getElementById('dragBlock2');
	var dragBlock3 = document.getElementById('dragBlock3');
	var dragBlock4 = document.getElementById('dragBlock4');
	var sortTable = document.getElementById('sortTable');
	
	
	//设置表格拖动点
	function changeWidth(obj){
		//在拖动点按下鼠标时，记录拖动点的横坐标
		obj.onmousedown = function(e){
			e = e||event;
			//this指向obj对象。获取鼠标当前的X轴坐标
			this.mouseDownX = e.clientX;
			//获取font的父元素td的宽度
			this.pareneTdW = this.parentNode.offsetWidth;
			//表格初始宽度
			this.pareneTableW = sortTable.offsetWidth;
			//IE下设置鼠标点捕获，防止鼠标焦点被打断。FF下无须捕获
			if(this.setCapture)
				this.setCapture();
		
			//鼠标移动时触发的事件，计算拖动了多少偏移量
			document.onmousemove = function(e){
				e = e||event;
				if(!obj.mouseDownX) return;
				//newWidth的值为td宽度加鼠标当前的X轴坐标再减去mouseDownX
				//表示现在比原先移动了多少偏移量
				var newWidth= obj.pareneTdW+e.clientX-obj.mouseDownX;
		   
			    //最小宽度为60象素，不可在移动TD
			    if(newWidth<60)return;
			    //改变td的宽度
				obj.parentNode.style.width = newWidth+'px';
				
				sortTable.style.width=obj.pareneTableW+e.clientX-obj.mouseDownX;
				
				//更新隐藏样式
				if(obj.id == 'dragBlock3')
					(document.styleSheets[0].rules||document.styleSheets[0].cssRules)[0].style.width = newWidth+'px';
			}
			//在拖动点松开鼠标时，还原拖动点的横坐标
			document.onmouseup = function(e){
				e = e||event;
				//释放焦点捕获
				if(obj.releaseCapture)
					obj.releaseCapture();
				//设置拖动点X轴坐标为0，表示拖动停止中
				obj.mouseDownX=0;
			}
		}
	}
	
		
		
	//调用拖动设置函数
	changeWidth(dragBlock1);
	changeWidth(dragBlock2);
	changeWidth(dragBlock3);
	changeWidth(dragBlock4);
</script>

	</body>
</html>