Solved

How to get position of an image that has been moved

Posted on 2006-11-30
4
2,477 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
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…

829 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