Solved

How to get position of an image that has been moved

Posted on 2006-11-30
4
2,466 Views
Last Modified: 2012-05-05
Hello,

I have a web page with an image on it that can be dragged and dropped using this great DHTML Library: http://www.walterzorn.com/dragdrop/dragdrop_e.htm#demolyr

I have found a lot of javascript examples for getting the coordinates of an element, but they all seem to return the original coordinates, and not the new coordinates after the image has been moved.

How can I get these new coordinates?

PS, I only dabble in javascript, so take it easy on me ;-)

Thanks,
Scott
0
Comment
Question by:smccoskery
  • 2
4 Comments
 
LVL 6

Accepted Solution

by:
system_down earned 250 total points
ID: 18051961

this lib. are cool but sometime you need something more.

If you need to know the position of an image after a drop you can easy use the mouse position.

something like:
function doSomething(e) {
      var posx = 0;
      var posy = 0;
      if (!e) var e = window.event;
      if (e.pageX || e.pageY)       {
            posx = e.pageX;
            posy = e.pageY;
      }
      else if (e.clientX || e.clientY)       {
            posx = e.clientX + document.body.scrollLeft
                  + document.documentElement.scrollLeft;
            posy = e.clientY + document.body.scrollTop
                  + document.documentElement.scrollTop;
      }
      // posx and posy contain the mouse position relative to the document
      // Do something with this information
}


another option is to use the id of the image you want to know the position.
ex:

var img = document.getElementById('image_id');

var x = img.style.padding-top;
var y = img.style.padding-left;

Use parseInt() if you want to manage x and y like number.

Let me know.

S_D



0
 

Author Comment

by:smccoskery
ID: 18055632
Thanks for your response.  The first example works, but depending on where the image is clicked for the drag, I get different results -- I need to know what the coordinates are for the top-left pixel of the image (anchor point?).  In a worst-case scenario I can work with this, but ideally I need the exact coordinates of the image, not the pointer.

For the second example, I'm only getting "undefined".  This is the code I'm using for the second example:
var img = document.getElementById('neckline');
var x = img.style.paddingleft;
var y = img.style.paddingtop;
var w = img.style.paddingbottom;
var z = img.style.paddingright;
alert(x);
alert(y);
alert(w);
alert(z);


Thanks again,
Scott
0
 
LVL 7

Assisted Solution

by:gam3r_3xtr3m3
gam3r_3xtr3m3 earned 250 total points
ID: 18057940
shouldn't it be a style.top and style.left?

<script>
function test(){
      alert("Top (y): " + document.getElementById('neckline').style.top);
      alert("Left (x): " + document.getElementById('neckline').style.left);
}
</script>
<body onLoad="test();">
<img width=100 height=100 id="neckline" style="position: absolute; top: 100px; left: 100px;" />

hope that helps,
gam3r_3xtr3m3
0
 

Author Comment

by:smccoskery
ID: 18097419
My bad -- I found that the DHTML library contains the necessary code to retrieve the current XY coordinates of any object that is passed to the library.  All of your examples were helpful,  so I'll split the points.

Regards,
Scott
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now