出处:/blog/1328215使用方法，新建一个html文件，把下面代码复制过去。然后调试就可以看到效果了。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>jQuery版“元素拖拽改变大小”原型</title>
<!--引用jquery-->
<scriptsrc="/jquery-2.0.3.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
/*
*jQuery.Resizebywuxinxi007
*Date:-5-14
*blog:/
*/
$(function()
{
//绑定需要拖拽改变大小的元素对象
bindResize(document.getElementById('test'));
});
functionbindResize(el)
{
//初始化参数
varels=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();
});
//移动事件
functionmouseMove(e)
{
//宇宙超级无敌运算中...
els.width=e.clientX-x+'px',
els.height=e.clientY-y+'px';
}
//停止事件
functionmouseUp()
{
//在支持releaseCapture做些东东
el.releaseCapture?(
//释放焦点
el.releaseCapture(),
//移除事件
el.onmousemove=el.onmouseup=null
):(
//卸载事件
$(document).unbind("mousemove",mouseMove).unbind("mouseup",mouseUp)
);
}
}
</script>
<styletype="text/css">
#test{position:absolute;top:0;left:0;width:400px;height:300px;background:#f1f1f1;
text-align:center;line-height:100px;border:1pxsolid#CCC;cursor:se-resize;}
</style>
</head>
<body>
<divid="test">
这是内容
</div>
</body>
</html>
如果觉得《jquery 拖动改变div 容器大小》对你有帮助，请点赞、收藏，并留下你的观点哦！
![java拖动组件 [小娱乐] 一个能拖动组件 改变组件大小的容器](https://sm.tqys.net/uploadfile/pic/630.jpg)
