mouse drag

甘英光
2023-12-01
<!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 ο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>
 类似资料:

相关阅读

相关文章

相关问答