Javascript jquery How to find the coordinates of an html element?

Question

I have an html page with two div elements. One is on the complete left of the page and it has classname toolbox. Another is just on the right of toolbox and it has classname canvas. Inside toolbox, there is a square shaped element with classname node1. Its width and height are 50 pixels each. The following code makes it possible to drag the node1 from toolbox to canvas. As you can see, there is a variable named x which is a clone of node1. Just after node.helper.remove() I want to write code to find the coordinates of the left top of the clone. The coordinates should be with respect to the canvas. Could you tell me what code to write?

$(document).ready(function(){
$(".node1").draggable({
    helper: 'clone',    // cloning the node/icon.
    cursor: 'move'      // move with cursor.
})

$(".canvas").droppable({

    drop: function(event, node) 
    {

        var x = node.helper.clone();

        x.draggable({
                containment: '.canvas'
                    });

        node.helper.remove();   
    }
});
});

api.jquery.com/position

Spokey
– Spokey

2013-10-14 10:17:23 +00:00
Commented Oct 14, 2013 at 10:17 — Spokey
– Spokey, Commented Oct 14, 2013 at 10:17

Martijn · Accepted Answer · 2013-10-14 11:34:35Z

2

You can use .offset() which is relative to the document and .position which is relevant to the direct parent.

.offset() returns an object with the x and y coordinates of the referenced object. You can access them like this:

$('Element').offset().top;
$('Element').offset().left;

edited Oct 14, 2013 at 11:34

Martijn

16.2k4 gold badges39 silver badges73 bronze badges

answered Oct 14, 2013 at 10:18

Alex

10.3k6 gold badges36 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

alexP · Accepted Answer · 2013-10-14 11:45:52Z

0

$(".node1").draggable({
    helper: 'clone',
    cursor: 'move',
});

$(".canvas").droppable({
    drop: function (event, node) {
        var x = $(node.helper).clone();
        $(this).append(x);
        console.log($(x).position()); //Returns top/left Coordinates
    }
});

answered Oct 14, 2013 at 11:45

alexP

3,7657 gold badges29 silver badges37 bronze badges

2 Comments

Avinash Over a year ago

Thank you. That gives me coordinates but here we are appending x. After getting coordinates, is there a way to remove it? How to do that? I tried $(this).remove(x) but it did not work.

Avinash Over a year ago

$(x).remove() works. So the problem is solved. How do I accept your answer? I do not see any option for that here.

Collectives™ on Stack Overflow

Javascript jquery How to find the coordinates of an html element?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related