How to get position of an image that has been moved

Posted on 2006-11-30
Last Modified: 2012-05-05

I have a web page with an image on it that can be dragged and dropped using this great DHTML Library:

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 ;-)

Question by:smccoskery
  • 2

Accepted Solution

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.

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

var x =;
var y =;

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

Let me know.



Author Comment

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 =;
var y =;
var w =;
var z =;

Thanks again,

Assisted Solution

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

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

hope that helps,

Author Comment

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.


Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
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…

910 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

16 Experts available now in Live!

Get 1:1 Help Now