mouse drag

来源：互联网发布：如何讲好中国故事知乎编辑：程序博客网时间：2024/05/28 23:22

<!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";
}
}

function dragEnd() {

var e = document.getElementById("dragDiv")
e.isDrag = false;
}
</script>
</head>

<body onload="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>