470,849 Members | 848 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,849 developers. It's quick & easy.

Drag and drop the image!

Hi,
I made a program to drag and drop the image using mouseevent, it only works
on IE well, not on Netscape. Does anyone has the example suitable for
Netscape? Please help. Thank you very much.

yihan
Jul 20 '05 #1
2 1511
yihan hu kiteb:
Hi,
I made a program to drag and drop the image using mouseevent, it only
works on IE well, not on Netscape. Does anyone has the example
suitable for Netscape? Please help. Thank you very much.


Can you show us the code? It might only require minor tweaking to fit.
And its something I want to do for one of my own projects too. You
wouldn't want to save me loads of time would you :)
--
--
Fabian
Visit my website often and for long periods!
http://www.lajzar.co.uk

Jul 20 '05 #2
"Fabian" <la****@hotmail.com> writes:
yihan hu kiteb:
I made a program to drag and drop the image using mouseevent,
Can you show us the code? It might only require minor tweaking to fit.
And its something I want to do for one of my own projects too. You
wouldn't want to save me loads of time would you :)


Very simple example (dragging, no effect on dropping):
---
<script type="text/javascript">
function dragImg(img,evt,how) {
how = how || "relative";
img.style.position = how;
var root = document.documentElement || document.body;
var x = img.xPos || (how == "relative" ? 0 : img.offsetLeft);
var y = img.yPos || (how == "relative" ? 0 : img.offsetTop);
var mx = evt.pageX || evt.clientX + root.scrollLeft;
var my = evt.pageY || evt.clientY + root.scrollTop;
document.onmousemove = function (evt){
evt = evt || window.event;
var newmx = evt.pageX || evt.clientX + root.scrollLeft;
var newmy = evt.pageY || evt.clientY + root.scrollTop;
x += newmx - mx;
y += newmy - my;
mx = newmx;
my = newmy;
img.style.left = x+"px";
img.style.top = y+"px";
img.style.outline="2px solid gray";
img.style.zIndex = "1";
return false;
}
document.onmouseup = function () {
document.onmousemove = document.onmouseup = null;
img.xPos = x;
img.yPos = y;
img.style.outline = img.style.zIndex = "";
return false;
}
return false;
}
</script>
---
with
---
<img src="..." onmousedown="return dragImg(this,event)">
---
or
---
<img src="..." style="position:absolute;"
onmousedown="return dragImg(this,event,'absolute')">
---

Good luck.
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by portraitmaker | last post: by
6 posts views Thread by Colin Young | last post: by
3 posts views Thread by Goldwind | last post: by
2 posts views Thread by TarheelsFan | last post: by
2 posts views Thread by sebastian.janoschka | last post: by
reply views Thread by Truevision .Net | last post: by
2 posts views Thread by ecashatt | last post: by
reply views Thread by jgraham | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.