TD实现鼠标Resize效果..

原创于 2011-09-23 17:27:28 发布 · 235 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ui #javascript #ViewUI

JQuery 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个利用jQuery实现的简单鼠标拖拽功能，包括如何在HTML表格中通过鼠标点击事件调整div元素的宽度。代码示例清晰易懂，适合前端开发者学习。

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

很简单的代码，功能还有点小Bug，不过很开心能实现。

JQuery代码：


$(function(){
/*
	 * 鼠标Resize
	 */
	$("#mouseMove").mousedown(
		function(ev){
			var _dragingElement=$(this).prev("td").children("div");

			$(document).mousemove(function(ev){
				ev = ev || window.event;

				var _x=ev.clientX;

				if(_x<0){
					$(_dragingElement).width(0);
				}else{
					$(_dragingElement).width(_x);
				}
			});
			$(document).mouseup(function(ev){
				$(document).unbind('mousemove');
				$(document).unbind('mouseup');				
			});
		}
	);
});

HTML代码：


<table cellpadding="0" cellspacing="1">
								<tbody>
									<tr>
										<td valign="top" width="1px">
											<div style="width:200px;height:450px;">
											</div>
										</td>
										<td style="width:2px;margin:0px;padding:0px;cursor:e-resize;" id="mouseMove"></td>
										<td valign="top">
											<iframe frameborder="0" height="430px" width="100%" src="infoView.jsp" name="infoView"></iframe>
										</td>
									</tr>
								</tbody>
							</table>