User Name Password Register
DaniWeb IT Discussion Community
All
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 374,144 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,500 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Get coordinates?

Join Date: Sep 2005
Posts: 611
Reputation: digital-ether will become famous soon enough digital-ether will become famous soon enough 
Rep Power: 5
Solved Threads: 38
Moderator
digital-ether's Avatar
digital-ether digital-ether is offline Offline
Practically a Master Poster

Re: Get coordinates?

  #5  
May 10th, 2008
Originally Posted by still_learning View Post
I need it to work so that when I quit dragging a layer and let go of the mouse, the coordinates are automatically grabbed. But I do not need the coordinates of the mouse, I need the coordinates as far as Left and Top go.

The company I am working for will not allow me to post the code. But I have found a website that has a very similar technique for dragging. Please look below and if you can, let me know how I could get the new coordinates based off of this code.....

<script>

var concernedLayers=new Array()
concernedLayers[0]=new Array("aName",425,160)
concernedLayers[1]=new Array("bName",415,380)
concernedLayers[2]=new Array("cName",290,285)
concernedLayers[3]=new Array("dName",310,285)
concernedLayers[4]=new Array("eName",305,290)
concernedLayers[5]=new Array("fName",635,545)
//syntax is: entry[x]=new Array(LAYERName, its_WIDTH, its_HEIGHT)
//you can go on with indexes [1], [2]...
var engagedZindex=0;
var engaged=null;

//DOM detected build up:
if(document.getElementById){
obj1="document.getElementById('"
obj2="')"
style=".style"
eX=(navigator.appName.indexOf("Internet Explorer")==-1)?
"e.clientX":"event.clientX";
eY=(navigator.appName.indexOf("Internet Explorer")==-1)?
"e.clientY":"event.clientY";
offsetX=(navigator.appName.indexOf("Internet Explorer")==-1)?
"pageXOffset":"document.body.scrollLeft"
offsetY=(navigator.appName.indexOf("Internet Explorer")==-1)?
"pageYOffset":"document.body.scrollTop"
}
else if(document.all){
obj1="document.all['"
obj2="']"
style=".style"
eX="event.clientX"
eY="event.clientY"
offsetX="document.body.scrollLeft"
offsetY="document.body.scrollTop"
}
else if(document.layers){
obj1="document.layers['"
obj2="']"
style=""
eX="e.pageX"
eY="e.pageY"
offsetX="pageXOffset"
offsetY="pageYOffset"
document.captureEvents(Event.MOUSEDOWN|Event.MOUSEMOVE|Event.MOUSEUP)
}
//DOM build up now over

function events(e){//argument must be set as e 
var Xin=eval(eX)
var Yin=eval(eY)
/*thanks to Dynamic HTML by Danny Goodman for
settings of following looping idea*/
for(var i=0;i < concernedLayers.length;i++){
var OGG=eval(obj1+concernedLayers[i][0]+obj2+style);
//is it visible?:
var visib=OGG.visibility
if(visib=="hidden"||
visib=="hide"){continue}
var layerW=concernedLayers[i][1]
var layerH=concernedLayers[i][2]
var L=parseFloat(OGG.left);//parseFloat: could carry a trailing "px" !
var T=parseFloat(OGG.top)
var offX=(document.layers)?0:eval(offsetX);//in case you scrolled
var offY=(document.layers)?0:eval(offsetY)
if(
Xin>(L-offX)&&Xin < (L-offX+layerW)&&
Yin>(T-offY)&&Yin < (T-offY+layerH))
{engaged=i;
moveX=Xin-L
moveY=Yin-T
engagedZindex=OGG.zIndex
setIndex(concernedLayers[i][0])
return}
}
engaged=null
/*keep this comment to reuse freely
http://www.unitedscripters.com */}

function setIndex(theLayer,how){
var OGG=eval(obj1+theLayer+obj2+style)
OGG.zIndex=(how)?how:101;
}

function disengage(){
if(engaged==null){return false}
setIndex(concernedLayers[engaged][0],engagedZindex)
moveX=null;
moveY=null;
engaged=null;
}

function dragLayer(e){
if(engaged==null){return false}
var Xin=eval(eX)
var Yin=eval(eY)
var OGG=eval(obj1+ concernedLayers[engaged][0]+ obj2+ style)
//now move it
OGG.top=Yin-moveY
OGG.left=Xin-moveX
/*keep this comment to reuse freely
http://www.unitedscripters.com */
}

document.onmousedown=events
document.onmousemove=dragLayer
document.onmouseup=disengage

</script>


Thanks


Basically, you'll want to add up all the offsets of each parent element until there are no more parent elements.

http://www.quirksmode.org/js/findpos.html

quicksmode explains it a bit. Its a good start, but not usable.
To make it usable you'll also have to account for relatively positioned elements. I'm not sure if window scroll and parent element scroll offsets are included or if you need to cater for that as well.
www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!
Reply With Quote  
All times are GMT -4. The time now is 3:17 am.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC