Hi,
I have created a website that has a page where you can drag layers around to different areas on the page. Is there any way that I can find the new coordinates of a layer after I drag it? What I ultimately need to do is store the coordinates in my database so that I can save the changes made after dragging stuff around. But for starters, I would just like to at least be able to output the coordinates right on the page so that I can see it is working. Please let me know what I can do. Thanks!
Jump to PostHi,
I have created a website that has a page where you can drag layers around to different areas on the page. Is there any way that I can find the new coordinates of a layer after I drag it? What I ultimately need to do is store the coordinates …
Hi,
I have created a website that has a page where you can drag layers around to different areas on the page. Is there any way that I can find the new coordinates of a layer after I drag it? What I ultimately need to do is store the coordinates in my database so that I can save the changes made after dragging stuff around. But for starters, I would just like to at least be able to output the coordinates right on the page so that I can see it is working. Please let me know what I can do. Thanks!
Could you post some of the code you're working with?
It seems that in order to drag layers around you'll need to know their coordinates?
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
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.
I have to be honest I don't even know where to start.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.