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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59
|
<html>
<head>
<title>Drag</title>
<script type="text/javascript">
function drag(id) {
this.isdrag = false;
this.target = document.getElementById(id);
this.lambdaX = null;
this.lambdaY = null;
var _this = this;
this.target.onmousedown=function (e) { _this.selectmouse(e) };
this.target.onmouseup=function () { _this.isdrag = false;};
this.selectmouse=function(e) {
this.isdrag = true;
tx = parseInt(this.target.style.left+0);
ty = parseInt(this.target.style.top+0);
if(navigator.appName != "Microsoft Internet Explorer") {
x = e.clientX;
y = e.clientY;
} else {
x = event.clientX;
y = event.clientY;
}
this.lambdaX = tx - x;
this.lambdaY = ty - y;
this.target.onmousemove=function (e) { _this.movemouse(e); };
}
this.movemouse=function(e) {
if (this.isdrag) {
if(navigator.appName != "Microsoft Internet Explorer") {
this.target.style.left = this.lambdaX + e.clientX;
this.target.style.top = this.lambdaY + e.clientY;
} else {
this.target.style.left = this.lambdaX + event.clientX;
this.target.style.top = this.lambdaY + event.clientY;
}
return false;
}
}
}
</script>
</head>
<body>
<img src="imageABouger.jpg" id="test" style="position:relative;"></img>
</body>
</html>
<script type="text/javascript">
new drag("test");
</script> |
Partager