JQuery拖拽元素改变大小尺寸实现代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Resizeable</title>
    <script type="text/javascript" src="../jquery/jquery.js"></script>
<!--     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> -->
<script type="text/javascript">
/*
* jQuery.Resize by Own
* Date:2014.01.08
*/
$(function(){
	//绑定需要拖拽改变大小的元素对象
	bindResize(document.getElementById('resizeable'));
});
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>
</head>
<body>
	<div id="resizeable" class="ui-widget-content"
		style="border: 1px solid red; width: 400px; height: 300px;">
		<h3 class="ui-widget-header">Resizable</h3>
	</div>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值