一：知识点
- e.pageX表示事件发生时，鼠标距离文档左边的距离
- e.pageY表示事件发生时，鼠标距离文档上边的距离
二：代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jq拖动插件简单小demo</title>
<style type="text/css">
body,div{
margin:0;
padding:0;
}
.box{
width:100px;
height:100px;
border:1px solid red;
padding:20px;
position:absolute;
}
.box:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">请拖动我</div>
<script src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
var move = false; //判断鼠标是否松开
var _x,_y; //鼠标点击时鼠标距离div左边和上边的距离
$('.box').click(function(){}).mousedown(function(e){
move = true;
_x = e.pageX - parseFloat($('.box').css("left"));
_y = e.pageY - parseFloat($('.box').css("top"));
});
$(document).mousemove(function(e){
if(move){
var x = e.pageX - _x;
var y = e.pageY - _y;
$('.box').css({'left':x,'top':y});
};
});
$('.box').mouseup(function(){
move = false;
});
});
</script>
</body>
</html>
如果发现错误和好的建议请在评论中指出
扫一扫
280
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
