php 页面拖动改变大小,JQuery拖拽并改变元素的尺寸

"元素拖拽改变大小"其实和"元素拖拽"一个原理，只是所动态改变的对象不同而已，主要在于 top、left、width、height 的运用，相对实现起来也非常容易。以下附出源码原型，弄明白了原理再扩展其他实际应用，思路就变得简单、清晰得多了。先来看看效果：

效果演示

拉下我～by www.nowamagic.net

下面是 JavaScript Code

/*

* jQuery.Resize by wuxinxi007

* Date: 2011-5-14

*/

$(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)

)

}

}