jQueryはdiv、移動div、ポップアップ層をドラッグして、原理と例を実現します。
2191 ワード
コードのプレゼンテーション:http://www.imqing.com/demo/movediv.html 大体の原理：divのpositionを絶対位置付けabsoluteにして、そのtopとleftの値を制御して、マウスのイベントを監督しなければならなくて、主にmousedownを使って、mousemoove、mouseup。mousedown後、mousedownを記録するとマウスと移動したいdivの位置が得られ、両者の差が得られ、マウス移動後にdivの位置が得られます。つまり、left=現在のマウス位置.x-(マウスクリック時の.x値-divの初期位置x値)top=現在のマウス位置.y-(マウスクリック時の.y値-divの初期位置y値)コード：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Qing's Web</title>
<script src="./jquery-1.7.2.min.js" type="text/javascript"></script>
<style type="text/css">
.footer {
position: fixed;
bottom: 0;
width: 100%;
}
.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 class="moveBar">
<div id="banner"> div</div>
<div class="content"> </div>
</div>
<div class="footer">
<p align="center" class="label">ALL Rights Reserved Qing </p>
</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>