1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var oldLeft,oldMouseLeft;
var oldRight,oldMouseRight;
var isDown=false;
function mousedown(e){
oldLeft=document.getElementById('div1').style.left;
oldMouseLeft= e.clientX;
oldRight=document.getElementById('div1').style.top;
oldMouseRight= e.clientY;
isDown = true;
}
function mousemove(e){
if(isDown){
var newMouseLeft= e.clientX;
var newLeft=parseInt(oldLeft)+parseInt(newMouseLeft)-parseInt(oldMouseLeft)+"px";
var newMouseRight= e.clientY;
var newRight=parseInt(oldRight)+parseInt(newMouseRight)-parseInt(oldMouseRight)+"px";
document.getElementById('div1').style.left=newLeft;
document.getElementById('div1').style.top=newRight;
}
}
function mouseup(){
isDown=false;
}
</script></head>
<body>
<div id="div1" style="background-color: blue;position: absolute;left: 100px;top: 100px;width: 100px;height: 100px"
onmousedown="mousedown(event)" onmousemove="mousemove(event)"
onmouseup="mouseup()">
</div>
<!--onmousedown="getXY(event);"-->
</body>
</html>
|
