您的位置：首页 > Web前端 > JQuery

jquery拖拽小demo

2017-06-18 11:33 218 查看

一：知识点

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>

如果发现错误和好的建议请在评论中指出

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery 鼠标

相关文章推荐

新的分享

章节导航