CODEWITHSUNDEEP
javascriptjqueryhtml
orpqK
orpqK

Reputation: 2795

Getting the positions of a object when you click on it

My current jFiddle: http://jsfiddle.net/3HauW/85/

It displays the position of bean 1 (box 1) when you move it around the page, but how I display the position of the second box? I want it to be able to display the position of whatever I click on.

So if I clicked on box 1 and moved it, it will display X and Y of the first box

If I licked on box 2 and moved it, it should display the X,Y of second box.

This is the part of the code where it shows the X and Y positions:

   $( "*", document ).on('click',function( event ) {
            var offset = $( "strong" ).offset();
            topp = offset.top;
            left = offset.left;
            event.stopPropagation();
            $( "#result" ).text( this.tagName +
            "  ( " + left + ", " + topp + " )" + offset.id );


}

Also, why is the id undefined?

Upvotes: 0

Views: 65

Answers (5)

FiLeVeR10
FiLeVeR10

Reputation: 2265

draggable has a built in stop event

So it may make sense to use that.

something like this:

$('.normal, .failure').draggable({//drag
    stop: function() {//on stop
        var t = parseInt($(this).position().top),//get top
            l = parseInt($(this).position().left);//get left
        $( "#result" ).text( this.tagName+' ('+l+', '+t+') '+this.id);//print
    }
});

made a fiddle: http://jsfiddle.net/filever10/8MVT9/

And the ID is undefined, because $( "strong" ).offset().id isn't correct, it would need to be $( "strong" ).prop('id') or something equivalent. Though strong doesn't have an ID, so it still wouldn't work... you need the ID of .normal & .failure for it to do what you want.

Upvotes: 1

Edgar Alexander
Edgar Alexander

Reputation: 374

Try:

$( "*", document ).on('click',function( event ) {
            var offset = $( this ).offset();
            topp = offset.top;
            left = offset.left;
            event.stopPropagation();
            $( "#result" ).text( this.tagName +
            "  ( " + left + ", " + topp + " )" + offset.id );


}

EDIT:

As id is undefined, it is part of a parent node, you have to notice that the node you select in each bean can be different and the access to the property can be variable (this, this.parentNode, etc), so you need to place it in a right place or set the event handler to specific elements.

Upvotes: 1

epascarello
epascarello

Reputation: 207557

id is undefined because there is no id in the .offset() method. You are doing 

$( "strong" ).offset().id

and offset only returns top and left, there is no id. That is why it is undefined.

Now to handle the issue with it returning the first item. The code

var offset = $( "strong" ).offset();

is also only looking at one element, if you want what was clicked you would use this

var elem = $(this);
var offset = elem.offset();

and to get the id

elem.attr("id);

Upvotes: 1

zsaat14
zsaat14

Reputation: 1118

This:

var offset = $( "strong" ).offset();

Should be this:

var offset = $( this ).offset();

Undefined ID:

For the undefined id, first there is no .id for the offest() method. Second, the only elements that have id's are the containers in the back. When you click on the boxes, you're actually clicking on the divs or p's in front, not the ones with the id's in the back. So if you want an id, you will need to add it to the p or div out front.

Here is a fiddle.

Upvotes: 1

taxicala
taxicala

Reputation: 21789

I think what you whant is something like this:

http://jsfiddle.net/3HauW/86/

instead of this:

var offset = $( "strong" ).offset();

I've done this:

var offset = $( this ).offset();

check the fiddle to see if that works

for the id, you should also change it to $(this).id

http://jsfiddle.net/3HauW/88/

but you have to add the ID to the elements.

Upvotes: 1

Related Questions