本文介绍了一个使用jQuery实现的拖动元素功能，通过绑定mousedown事件来捕获鼠标按下，然后利用mousemove事件来更新元素的位置，同时限制了元素在窗口内的移动范围。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.11.1.min.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 100px;
height: 100px;
background: plum;
position:absolute;
left: 0;
top: 0;
color:white;
text-align:center;
line-height:100px;
}
</style>
</head>
<body>
<div>贝尔</div>
<script>
$('div').bind('mousedown',function(e){
var dx=e.offsetX;
var dy=e.offsetY;
$(document).bind({
"mousemove":function(e){
var l=e.clientX-dx;
var t=e.clientY-dy;
if(l<=0){
l=0;
}else if(l>=$(window).width()-$('div').width()){
l=$('html,body').width()-$('div').width();
}
if(t<=0){
t=0;
}else if(t>=$(window).height()-$('div').height()){
t=$(document).height()-$('div').height()
}
$('div').css({'left':l+"px",'top':t+"px"})
},
"mouseup":function(){
$(this).unbind("mousemove");
}
});
return false;
})
</script>
</body>
</html>
多多指教 !
扫一扫
149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
