Hello,
the script below is a drag and drop script. It has two images (crocodile and viking).
When dragging the viking image, the crocodile image
(unfortunately) is in the foreground.
How can i change the script, so that
- - the currently moved - -
image is in the foreground?
-It should be like this :
Example 1:
When dragging the viking image, the viking image should be
in the foreground, and the crocodile should be in the background.
Example 2:
When dragging the alligator image, the alligator image should be
in foreground, and the viking should be in the background.
<html>
<head>
<title></title>
</head>
<script>
xm = 0;
ym = 0;
M = false;
window.onload = function(){
document.onmousedown= function(e){
if (!e) e = window.event;
tg = (e.target) ? e.target : e.srcElement
if(tg.className =="d" && e.button==1){
M = tg;
with(M.style){
xZ = pixelLeft-xm;
yZ = pixelTop-ym;
}
return false;
}
}
document.onmouseup= function(){
if(M){M = false;}
}
document.onmousemove=funct
ion(e){
if (!e) e = window.event;
tg = (e.target) ? e.target : e.srcElement
xm = (e.x || e.clientX);
ym = (e.y || e.clientY);
if(M){
M.style.pixelLeft=xm+xZ;
M.style.pixelTop=ym+yZ;
return false
}
}
}
</script>
<body oncontextmenu="return false">
<p>
<img src="
http://files.opera-info.de/bilder/forum/user/viking.gif" class="d" title="image 1" style="position:absolute;t
op:150px">
<img src="
http://www.walterzorn.de/images/dragdrop/ddalligator.jpg" class="d" title="image 2" style="position:absolute">
</p>
</body>
</html>
Start Free Trial
