简明现代魔法 -> JQuery -> JQuery拖拽并改变元素的尺寸

JQuery拖拽并改变元素的尺寸

2011-05-10

"元素拖拽改变大小"其实和"元素拖拽"一个原理,只是所动态改变的对象不同而已,主要在于 top、left、width、height 的运用,相对实现起来也非常容易。以下附出源码原型,弄明白了原理再扩展其他实际应用,思路就变得简单、清晰得多了。先来看看效果:

效果演示

拉下我~by www.nowamagic.net

下面是 JavaScript Code

<script type="text/javascript">
	/*
	 * jQuery.Resize by wuxinxi007
	 * Date: 2011-5-14
	 */
	$(function(){
		//绑定需要拖拽改变大小的元素对象
		bindResize(document.getElementById('test'));
	});
	
	function bindResize(el){
		//初始化参数
		var els = el.style,
			//鼠标的 X 和 Y 轴坐标
			x = y = 0;
		//邪恶的食指
		$(el).mousedown(function(e){
			//按下元素后,计算当前鼠标与对象计算后的坐标
			x = e.clientX - el.offsetWidth,
			y = e.clientY - el.offsetHeight;
			//在支持 setCapture 做些东东
			el.setCapture ? (
				//捕捉焦点
				el.setCapture(),
				//设置事件
				el.onmousemove = function(ev){
					mouseMove(ev || event)
				},
				el.onmouseup = mouseUp
			) : (
				//绑定事件
				$(document).bind("mousemove",mouseMove).bind("mouseup",mouseUp)
			)
			//防止默认事件发生
			e.preventDefault()
		});
		//移动事件
		function mouseMove(e){
			//宇宙超级无敌运算中...
			els.width = e.clientX - x + 'px',
			els.height = e.clientY - y + 'px'
		}
		//停止事件
		function mouseUp(){
			//在支持 releaseCapture 做些东东
			el.releaseCapture ? (
				//释放焦点
				el.releaseCapture(),
				//移除事件
				el.onmousemove = el.onmouseup = null
			) : (
				//卸载事件
				$(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
			)
		}
	}
</script>
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们