...

View Full Version : drag and position image



linuxis
05-23-2006, 08:52 PM
I need help with the following, it's the idea that people visiting my site can drag an small image, over a larger image, and when a submit button is pressed the x-y coordinate of the small image has to be submitted to a cgi script. After several hours surfing on the net I found a good 'drag' script, though I don't know how to build the small image within a bigger (background) image, the smaller image must stay within the boundries of the bigger image. I also need help fetching the x-y position so that I can pass it to the cgi script. I'm not really good at javascript, so I need all the help I can get. Thanks in advance.

Ps. I've enclosed the .js file with this posting.


<body>
<script type="text/javascript" src="e:\drag\wz_dragdrop.js"></script>

<img name="part" src="c:\ms-windows_logo.jpeg" alt="">

<script type="text/javascript">
<!--
SET_DHTML("part", "name2", "anotherLayer", "lastImage");
//-->
</script>

</body>

linuxis
05-24-2006, 11:32 PM
Anyone ?

vwphillips
05-25-2006, 08:06 AM
http://www.vicsjavascripts.org.uk/DragDockAvoid/DragDockAvoid.htm

may be back to night

vwphillips
05-25-2006, 06:52 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
</head>

<body>
<div style="position:relative;left:0px;top:0px;width:500px;height:400px;" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=500 height=400 >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width=50 height=40
style="position:absolute;left:0px;top:0px;"
onmousedown="zxcMseDown(event,this)">
</div>

<script language="JavaScript" type="text/javascript">
<!--
var zxcObj;
var zxcEvt=0;

function zxcMseDown(event,zxcobj) {
if (zxcObj){ return; }
document.onselectstart=function(event){window.event.returnValue=false; }
zxcObj=zxcobj;
zxcp=zxcObj.parentNode;
zxcObj.pos=[parseInt(zxcObj.style.left),parseInt(zxcObj.style.top),zxcp.offsetWidth-zxcObj.offsetWidth,zxcp.offsetHeight-zxcObj.offsetHeight];
zxcObj.osx=zxcMse(event)[0]-zxcObj.offsetLeft-zxcPos(zxcp)[0];
zxcObj.osy=zxcMse(event)[1]-zxcObj.offsetTop-zxcPos(zxcp)[1];
zxcAddEvt(zxcObj,'zxcMseUp','mouseout');
}

function zxcDrag(event){
if (!zxcObj){ return; }
zxcObj.pos[0]=(zxcMse(event)[0]-zxcObj.osx);
zxcObj.pos[1]=(zxcMse(event)[1]-zxcObj.osy);
if (zxcObj.pos[0]>=0&&zxcObj.pos[0]<=zxcObj.pos[2]&&zxcObj.pos[1]>=0&&zxcObj.pos[1]<=zxcObj.pos[3]){
zxcObj.style.left=(zxcObj.pos[0])+'px';
zxcObj.style.top=(zxcObj.pos[1])+'px';
}
}


function zxcMseUp(){
document.onselectstart=null;
zxcObj=null;
}

function zxcMse(event){
if(!event) var event=window.event;
if (document.all){ return [event.clientX+zxcDocS()[0],event.clientY+zxcDocS()[1]]; }
else { return[event.pageX,zxcMseY=event.pageY]; }
}

function zxcDocS(){
var zxcsx,zxcsy;
if (!document.body.scrollTop){ zxcsx=document.documentElement.scrollLeft; zxcsy=document.documentElement.scrollTop; }
else { zxcsx=document.body.scrollLeft; zxcsy=document.body.scrollTop; }
return [zxcsx,zxcsy];
}

function zxcEventObj(zxce){
if (!zxce) var zxce=window.event;
if (zxce.target) zxceobj=zxce.target;
else if (zxce.srcElement) zxceobj=zxce.srcElement;
if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
return zxceobj;
}

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];
}


function zxcEventAdd(zxco,zxct,zxcf){
if (zxco.addEventListener){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if (zxco.attachEvent){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco['on'+zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}

function zxcAddEvt(zxcobj,zxcfun,zxcevt){
if (zxcobj[zxcevt+'add']){ return; }
zxcobj['zxcaddEvt'+zxcEvt]=window[zxcfun];
zxcobj[zxcevt+'add']=true;
zxcEventAdd(zxcobj,zxcevt,'zxcaddEvt'+zxcEvt);
zxcEvt++;
}

zxcAddEvt(document,'zxcDrag','mousemove');
zxcAddEvt(document,'zxcMseUp','mouseup');

//-->
</script>
</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum