Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 JQuery拖拽元素改变大小尺寸实现代码

JQuery拖拽元素改变大小尺寸实现代码

发布时间:2013-10-11   编辑:www.jquerycn.cn
"元素拖拽改变大小"其实和"元素拖拽"一个原理,以下附出源码原型,弄明白了原理再扩展其他实际应用,思路就变得简单、清晰得多了

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

下面是 JavaScript Code

复制代码 代码如下:

<script type="text/javascript">
/*
* 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)
)
}
}
</script>

您可能感兴趣的文章:
JQuery拖拽元素改变大小尺寸实现代码
jQuery UI API 类别 – 交互
HTML5 DragEvent接口的实例讲解
JQuery之拖拽插件实现代码
简单的jquery拖拽排序效果实现代码
JQuery UI的拖拽功能实现方法小结
使用h5实现react拖拽排序组件的方法(附代码)
jquery sortable的拖动方法示例详解
jquery页面拖拽并保存到cookie实例分享
如何使用jQuery Draggable和Droppable实现拖拽功能

关键词: JQuery  元素  尺寸   
[关闭]