jquery拖动改变div大小

2024-02-17 11:03:04 53

jQuery版“元素拖拽改变大小”原型 /* *jQuery.Resizebywuxinxi007 *Date:2011-5-14 *blog:http://wuxinxi007.cnblogs.com/ */ $(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) ) } } #test{ position:absolute; top:0;left:0; width:200px; height:100px; background:#f1f1f1; text-align:center; line-height:100px; border:1pxsolid#CCC; cursor:move; } dgdg

jquery拖动改变div大小

热门推荐

随机推荐