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

Use Case: Protecting a Hybrid Cloud Infrastructure

Microsoft Azure is rapidly becoming the norm in dynamic IT environments. This document describes the challenges that organizations face when protecting data in a hybrid cloud IT environment and presents a use case to demonstrate how Acronis Backup protects all data.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to catch the result of a javascript confirm dialog box, for a C# onclick event 4 60
how can i extend ? 2 43
DataTables + iCheck + pagination Issue 2 22 mvc5 6 16
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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.
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…

773 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