jQuery拖動div、移動div、彈出層演示示例

時間 2019-11-11

原文原文鏈接

Query拖動div、移動div、彈出層實現原理及示例，實現原理是使div的position爲絕對定位absolute，而後控制其top與 left值，須要監聽鼠標事件，主要用到mousedown, mousemove, mouseup。在mousedown後，記錄mousedown 時鼠標與須要移動的div的位置，而後取得二者之差，獲得在鼠標移動後，div的位置。即： left = 當前鼠標位置.x - (鼠標點擊時的.x 值 - div的初始位置x值) ，top = 當前鼠標位置.y - (鼠標點擊時的.y值 - div的初始位置y值)
javascript

<!DOCTYPE html>
<html>
<head>
<title>jQuery拖動div、移動div、彈出層示例</title>
<script src="http://www.codefans.net/ajaxjs/jquery-1.9.1.min.js" type="text/javascript"></script>
<style type="text/css">
.moveBar {
position: absolute;
width: 250px;
height: 300px;
background: #666;
border: solid 1px #000;
}
#banner {
background: #52CCCC;
cursor: move;
}
</style>
</head>
<body style="padding-top: 50px;">
<div>
<div id="banner">按住這裏可移動當前div</div>
<div>彈出層的正文內容</div>
</div>
<script>
jQuery(document).ready(
function () {
$('#banner').mousedown(
function (event) {
var isMove = true;
var abs_x = event.pageX - $('div.moveBar').offset().left;
var abs_y = event.pageY - $('div.moveBar').offset().top;
$(document).mousemove(function (event) {
if (isMove) {
var obj = $('div.moveBar');
obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y});
}
}
).mouseup(
function () {
isMove = false;
}
);
}
);
}
);
</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。