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

Jquery可移动的DIV

2016-05-19 16:48 453 查看

做这个不难，主要是理解了计算的公式吧，鼠标移动的位置-（鼠标按下的位置-要移动div与浏览器的边距）

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有问题的代码</title>
<style>
* {
margin: 0;
padding: 0;
}

.header p {
position: absolute;
right: 20px;
top: 10px;
}

#header-login-box {
display: none;
width: 200px;
height: 200px;
border: 1px solid #000;
margin-left: 200px;
margin-top: 200px;
}

.login-title {
padding: 10px 0;
border-bottom: 1px solid #dddddd;
cursor: move;
}

</style>
</head>
<body>
<div class="header">
<p id="login">登陆</p>
</div>
<div id="header-login-box">
<div class="login-title">可以拖动的div</div>

</div>
</body>
<script src="jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {

//div的位置
var divX = 0;
var divY = 0;
//鼠标的位置
var mouseX = 0;
var mouseY = 0;
//鼠标和div的距离
var difX;
var difY;
var isDown = false;

$("#login").on("click", function () {
$("#header-login-box").show();

$(".login-title").mousedown(function (e) {
isDown = true;
divX = $("#header-login-box").offset().left;
divY = $("#header-login-box").offset().top;

difX = e.pageX - divX;
difY = e.pageY - divY;

})

$(document).mousemove(function (e) {
if (isDown == true) {

newX = e.pageX - difX;
newY = e.pageY - difY;

$("#header-login-box").css("margin-left", newX + "px").css("margin-top", newY + "px");
}

}).mouseup(function (e) {
isDown = false;
})

})
});
</script>
</html>

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

标签： jquery

相关文章推荐

新的分享

章节导航