mouse drag
甘英光
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
function aaa(){
document.getElementById("myDrag").onmousedown = dragStart;
document.getElementById("myDrag").onmousemove = drag;
document.getElementById("myDrag").onmouseup = dragEnd;
}
var dx = 0;
var dy = 0;
function dragStart() {
var e = document.getElementById("dragDiv");
e.isDrag = true;
var ox = parseInt(e.style.left);
var oy = parseInt(e.style.top);
var mx = event.clientX;
var my = event.clientY;
dx = mx - ox;
dy = my - oy;
}
function drag() {
var e = document.getElementById("dragDiv")
if (e.isDrag) {
var mx = event.clientX;
var my = event.clientY;
e.style.left = (mx - dx) + "px";
e.style.top = (my - dy) + "px";
}
}
e.isDrag = false;
}
</script>
</head>
<body οnlοad="aaa();">
<div id="dragDiv" style="width:200px; height:300px; background-color:black; z-index:10; position: relative; left:0px; top:0px;">
<div id="myDrag" style="width:100px; height:100px; background-color:red; z-index:100;"></div>
</div>
</body>
</html>
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
function aaa(){
document.getElementById("myDrag").onmousedown = dragStart;
document.getElementById("myDrag").onmousemove = drag;
document.getElementById("myDrag").onmouseup = dragEnd;
}
var dx = 0;
var dy = 0;
function dragStart() {
var e = document.getElementById("dragDiv");
e.isDrag = true;
var ox = parseInt(e.style.left);
var oy = parseInt(e.style.top);
var mx = event.clientX;
var my = event.clientY;
dx = mx - ox;
dy = my - oy;
}
function drag() {
var e = document.getElementById("dragDiv")
if (e.isDrag) {
var mx = event.clientX;
var my = event.clientY;
e.style.left = (mx - dx) + "px";
e.style.top = (my - dy) + "px";
}
}
function dragEnd() {
var e = document.getElementById("dragDiv")e.isDrag = false;
}
</script>
</head>
<body οnlοad="aaa();">
<div id="dragDiv" style="width:200px; height:300px; background-color:black; z-index:10; position: relative; left:0px; top:0px;">
<div id="myDrag" style="width:100px; height:100px; background-color:red; z-index:100;"></div>
</div>
</body>
</html>
类似资料：