PDA

Click to See Complete Forum and Search --> : Click and drag problem

malonso
07-07-2005, 09:24 AM
Howdy folks I am having a little bit of an issue with setting up a drag and drop page. Right now I have a page (http://tornado.meso.com/google_sfc/no_div.php) (source (http://tornado.meso.com/google_sfc/no_div.php) ) that displays surface weather observations. Pretty much I am hopping on the google map bandwagon and trying to make a page similar to that. You can move the image around with the arrows right now and when you mouseover a station a popup box with more information is displayed. As it is situated right now the popup box is actually an iframe (source (http://tornado.meso.com/google_sfc/read_site_data.phps) ) which is ontop of the images. The popup boxes obviously do not work if the images are situated over top of it. The javascript on the main page will pass variables via the src url because there are different #s of stations based on the zoom level and the part of the image being displayed (at most ~1800 stations per zoom level). I just threw some simple code together to be able to move an img anywhere on the page (source (http://tornado.meso.com/google_sfc/test_move_img.php) ). You click anywhere on the page and then move your mouse around and the image will move accordingly. To "drop" the image you simply left click again. Again let me emphasize that I am incredibly new to javascript and the code is incredibly basic and probably quite inefficient. I was hoping that someone might be able to help me out so that I can keep all the current features of the page and add the ability to move/drag the images around.

FYI-the big map on the main page is actually a series of 120x120 images with a viewing area that is 720x480. Not sure if that might help any but I thought I would throw it in there.

Thanks in advance. If anymore info is needed please let me know.
vwphillips
07-07-2005, 03:29 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
document.onmousedown=function(event) { zxcMseDown(event,document.getElementById('Move3'));}

function zxcMseDown(event,obj) {
document.onmousemove=function(event){zxcDrag(event);}
document.onmouseup=function(event){zxcMseUp(event);}
zxcObj=obj;
zxcMse(event);
zxcDragX=zxcObj.offsetWidth/2;
zxcDragY=zxcObj.offsetHeight/2;
}

function zxcMseUp(event){
document.onmousemove=null; zxcDragX=-1; zxcDragY=-1;
}

function zxcDrag(event){
zxcMse(event);
zxcObj.style.left=(zxcMseX-zxcDragX)+'px';
zxcObj.style.top=(zxcMseY-zxcDragY)+'px';
}

function zxcMse(event){
if(!event) var event=window.event;
if (document.all){ zxcMseX=event.clientX; zxcMseY=event.clientY; }
else {zxcMseX=event.pageX; zxcMseY=event.pageY; }
}

function zxcPos(zxc){
zxcObjLeft = zxc.offsetLeft;
zxcObjTop = zxc.offsetTop;
while(zxc.offsetParent!=null){
zxcObjParent=zxc.offsetParent;
zxcObjLeft+=zxcObjParent.offsetLeft;
zxcObjTop+=zxcObjParent.offsetTop;
zxc=zxcObjParent;
}
return [zxcObjLeft,zxcObjTop];
}



//-->
</script>
</head>

<body >
<img id="Move3" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50"
style="position:absolute;top:400px;z-Index:2;" >



</body>

</html>
malonso
07-08-2005, 12:03 PM
Thanks Vic, I will test that out as soon as I get a chance and let you know how it goes. I really appreciate your help.