jquery拖动改变div大小
程序员文章站
2022-05-26 08:57:56
本文实例为大家分享了jquery拖动改变div大小的具体代码，供大家参考，具体内容如下
本文实例为大家分享了jquery拖动改变div大小的具体代码，供大家参考，具体内容如下
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>jquery 版“元素拖拽改变大小”原型 </title>
<script type="text/javascript" src="../js/jquery-1.7.1.js"></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:200px;
height:100px;
background:#f1f1f1;
text-align:center;
line-height:100px;
border:1px solid #ccc;
cursor:move;
}
</style>
</head>
<body>
<div id="test">dgdg</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。