出处:
使用方法，新建一个html文件，把下面代码复制过去。然后调试就可以看到效果了。 <! DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < title >jQuery 版“元素拖拽改变大小”原型 </ title > <!-- 引用jquery --> < script src ="http://code.jquery.com/jquery-2.0.3.min.js" type ="text/javascript" ></ script > < script type ="text/javascript" > /* * jQuery.Resize by wuxinxi007 * Date: 2011-5-14 * blog : http://wuxinxi007.cnblogs.com/ */ $( 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 > < style type ="text/css" > #test { position : absolute ; top : 0 ; left : 0 ; width : 400px ; height : 300px ; background : #f1f1f1 ; text-align : center ; line-height : 100px ; border : 1px solid #CCC ; cursor : se-resize ; } </ style > </ head > < body > < div id ="test" > 这是内容 </ div > </ body > </ html >