jQuery拖拽改变元素大小

浏览数：35 / 时间：2015年06月09日

一个非常简单的例子,体验效果：http://keleyi.com/keleyi/phtml/jqtexiao/29.htm

以下是完整代码，保存到HTML文件打开也可以体验效果。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>jQuery 版“元素拖拽改变大小”原型 </title> 
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
/* 
* jQuery.Resize 
* Date: 2014-12-04 
* http://keleyi.com/ 
*/
$(function () {
//绑定需要拖拽改变大小的元素对象 
bindResize(document.getElementById(‘kel‘+‘eyi‘));
});

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> 
<style type="text/css"> 
#keleyi{ 
position:absolute; 
top:0;left:0; 
width:200px; 
height:100px; 
background:#f1f1f1; 
text-align:center; 
line-height:16px; 
border:1px solid #CCC; 
cursor:move; 
} 
</style> 
</head> 

<body> 
<div id="keleyi">柯乐义：请按住本灰色区域并拖拽.<a href="http://keleyi.com/a/bjad/yy8jnwqj.htm" target="_blank">原文</a>.本效果支持各种浏览器，入Chrome,FireFox,IE,Opera等</div> 
</body> 
</html>

http://keleyi.com/a/bjad/yy8jnwqj.htm