提到拖拽效果，会想到弹出层拖动效果、拖动同等宽高元素进行位置切换，还有就是拖动元素随意改变其大小。今天其实想分享的就是最后一种，也是我最近在项目中用到的。OK，让我们一起来学习下。
"元素拖拽改变大小"其实和"元素拖拽"一个原理，只是动态改变的对象不同而已，主要在于top、left、width、height的运用，拖动元素时通过JS计算其所在的位置。我们用三步来学习。
第一步
鼠标按下mousedown计算位置：
$(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)
)
}OK，了解完以上三步后，我们来看看完整的代码：
<!DOCTYPE html>
<html>
<head>
<title>jquery拖动动画</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://jiangweishan.com/demo/js/jquery-2.2.4.min.js"></script>
<style type="text/css">
*{margin: 0px;padding: 0px;}
#test{width:400px; height: 300px; position: relative; margin: 20px auto 0px;background:#f5f5f5;border:solid #ddd 1px;text-align:center;line-height:300px;font-size:24px}
</style>
</head>
<body>
<div id="test">用你的鼠标来拖动我吧！</div>
<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>
</body>
</html>大家可以点击预览看看效果，也可以编辑代码。通过这次的学习，希望大家能把这项技术运用到具体项目中。
网友评论文明上网理性发言 已有0人参与
发表评论: