使用jQuery实现拖动DIV十分方便,只需寥寥几行代码即可。
<script src="../script/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var bool = false;
var offsetX = 0;
var offsetY = 0;
$('document').ready(function() {
$("#DragTitle").mousedown(function(event) {
bool = true;
offsetX = event.offsetX ? event.offsetX : event.layerX;
offsetY = event.offsetY ? event.offsetY : event.layerY;
$("#DragTitle").css('cursor', 'move');
})
.mouseup(function() {
bool = false;
})
$(document).mousemove(function(event) {
if (!bool) {
return;
}
else {
var x = event.clientX - offsetX;
var y = event.clientY - offsetY;
$("#DragBody").css("position", "absolute");
$("#DragBody").css("left", x);
$("#DragBody").css("top", y);
}
})
});
</script>
<div id="DragBody" style="300px; height:200px; ">
<div id="DragTitle" style="height:20px; background-color: #0066FF;">
Title
</div>
<div id="DragContainer" style="height:180px; background-color: #99CCFF;">
内容
</div>
</div>