“元素拖拽改变大小”其实和“元素拖拽”一个原理,只是所动态改变的对象不同而已,主要在于 top、left、width、height 的运用,相对实现起来也非常容易。以下附出源码原型,弄明白了原理再扩展其他实际应用,思路就变得简单、清晰得多了。
在引入 Jquery.js 后:
<
script type
=
"
text/javascript
"
>
$( 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>
$( 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>
width 和 height 的中不允许出现负数的值,否则会报错,那么根据这个需求简单扩展了一个“限制最小高宽”的小实例:
<
script type
=
"
text/javascript
"
>
$( function (){
// 绑定需要拖拽改变大小的元素对象
bindResize(document.getElementById( ' test ' ), 200 , 100 );
});
// 绑定需要拖拽改变大小的元素对象
// el 元素对象
// minW 最小宽度
// minH 最小高度
function bindResize(el,minW,minH){
// 初始化参数
var els = el.style,
// 鼠标的 X 和 Y 轴坐标
x = y = Xm = Ym = 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){
// 宇宙超级无敌运算中...
Xm = e.clientX - x,
Ym = e.clientY - y;
// 限制高宽
Xm <= minW && (Xm = minW),
Ym <= minH && (Ym = minH);
// 设置大小
els.width = Xm + ' px ' ,
els.height = Ym + ' px '
}
// 停止事件
function mouseUp(){
// 在支持 releaseCapture 做些东东
el.releaseCapture ? (
// 释放焦点
el.releaseCapture(),
// 移除事件
el.onmousemove = el.onmouseup = null
) : (
// 卸载事件
$(document).unbind( " mousemove " , mouseMove).unbind( " mouseup " , mouseUp)
)
}
}
< / script>
$( function (){
// 绑定需要拖拽改变大小的元素对象
bindResize(document.getElementById( ' test ' ), 200 , 100 );
});
// 绑定需要拖拽改变大小的元素对象
// el 元素对象
// minW 最小宽度
// minH 最小高度
function bindResize(el,minW,minH){
// 初始化参数
var els = el.style,
// 鼠标的 X 和 Y 轴坐标
x = y = Xm = Ym = 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){
// 宇宙超级无敌运算中...
Xm = e.clientX - x,
Ym = e.clientY - y;
// 限制高宽
Xm <= minW && (Xm = minW),
Ym <= minH && (Ym = minH);
// 设置大小
els.width = Xm + ' px ' ,
els.height = Ym + ' px '
}
// 停止事件
function mouseUp(){
// 在支持 releaseCapture 做些东东
el.releaseCapture ? (
// 释放焦点
el.releaseCapture(),
// 移除事件
el.onmousemove = el.onmouseup = null
) : (
// 卸载事件
$(document).unbind( " mousemove " , mouseMove).unbind( " mouseup " , mouseUp)
)
}
}
< / script>
下载:实例原型
版权声明:
本文原创发布于 博客园,作者为 小吴同学,博客 http://wuxinxi007.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则视为侵权。
本文原创发布于 博客园,作者为 小吴同学,博客 http://wuxinxi007.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则视为侵权。