<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="Scripts/jquery-1.4.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>
</head>
<body>
<form id="form2" runat="server">
<div id="DragBody" style="width: 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>
</form>
</body>
</html>