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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
PHP: Filling Out/Creating a PDF 29 156
15 puzzle in Javascript/html 2 81
Diff of the day 2 37
Change background images after 5 seconds. 12 41
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
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…
Suggested Courses

736 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