<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script language=javascript>
var intX;
var intY;
var blnDrag = false; //鼠标是否已经按下
//鼠标按下
function MouseDown(id) {
//鼠标按下
blnDrag = true;
intX = event.clientX - GetDiv(id).style.pixelLeft;
intY = event.clientY - GetDiv(id).style.pixelTop;
}
//鼠标拖动
function DragDiv(id) {
//判断鼠标是否已经按下
if (!blnDrag) {
return false;
}
else {
GetDiv(id).style.pixelLeft = event.clientX - intX;
GetDiv(id).style.pixelTop = event.clientY - intY;
}
}
//鼠标松开时
function mouseUp() {
//鼠标没有按下
blnDrag = false;
}
//得到DIV
function GetDiv(id) {
return document.getElementByIdx(id);
}
</script>
</head>
<body >
<form id="form1" runat="server">
<div id="div1" style="CURSOR: move; POSITION: absolute; WIDTH: 140px; HEIGHT: 112px; background-color:Red"
onmousemove="DragDiv(this.id)"
onmousedown="MouseDown(this.id)"
onmouseup="mouseUp()"></div>
</form>
</body>
</html>
<head runat="server">
<title></title>
<script language=javascript>
var intX;
var intY;
var blnDrag = false; //鼠标是否已经按下
//鼠标按下
function MouseDown(id) {
//鼠标按下
blnDrag = true;
intX = event.clientX - GetDiv(id).style.pixelLeft;
intY = event.clientY - GetDiv(id).style.pixelTop;
}
//鼠标拖动
function DragDiv(id) {
//判断鼠标是否已经按下
if (!blnDrag) {
return false;
}
else {
GetDiv(id).style.pixelLeft = event.clientX - intX;
GetDiv(id).style.pixelTop = event.clientY - intY;
}
}
//鼠标松开时
function mouseUp() {
//鼠标没有按下
blnDrag = false;
}
//得到DIV
function GetDiv(id) {
return document.getElementByIdx(id);
}
</script>
</head>
<body >
<form id="form1" runat="server">
<div id="div1" style="CURSOR: move; POSITION: absolute; WIDTH: 140px; HEIGHT: 112px; background-color:Red"
onmousemove="DragDiv(this.id)"
onmousedown="MouseDown(this.id)"
onmouseup="mouseUp()"></div>
</form>
</body>
</html>
