In a Html Application, using javascript, how would I get an image's position on the screen an put it in a text document?

Question

I have several images, with different id's, that use the jquery ui draggble div code:

$( function() {
$( "#t" ).draggable();
} );

How do I get the x and y coordinates (left: px;top: px; in css) that the image is on and put it in a text document?

Answer 1

Using jQuery UI, you have the position of the element on the "stop" event, which is triggered when the drag stops.

$( ".selector" ).draggable({
  stop: function( event, ui ) {
    // Here, on the ui object, you have both position and offset
    // See below for an explanation of the difference
  }
});

For retrieving the position of the element, relative to the offset parent , you should use the position() api. If you want the position relative to the document , you should use the offset() api.

jquery docs :

When positioning a new element on top of an existing one for global manipulation (in particular, for implementing drag-and-drop), .offset() is more useful.

in both case, you can use the dot syntax to get a specific direction offset or position :

$('#test').offset().left;
$('#test').offset().top;
// -----
$('#test').position().left;
$('#test').position().top;

For storing that information to a file, you may need an API where you send the data via an ajax call, and then do the file writing stuff (help here depend on the backend tech you choose).