CODEWITHSUNDEEP
javascriptjquery
blue-sky
blue-sky

Reputation: 53806

Get X,Y position of div

I have 3x3 list of jQuery divs like so :

div1 div2 div3
div4 div5 div6
div7 div8 div9

When a div is dragged & dropped I would like to get its X & Y position in relation to the other div elements. so if div1 is dragged to div3 position I need to retrieve the postion 0,3 which represents the new position of div1. Do I need to use a plugin ?

So just to need to override droppable like so and get position : 

$( ".myClass" ).droppable({ drop: function( event, ui ) 
            { 
alert('my position in relation to other divs is '+????
            } 
        });

Ive added a jsFiddle : http://jsfiddle.net/aL3tr/ Can the X & Y co-ordinate of dropped item be retrieved ? In this case Y position will always be zero.

Upvotes: 1

Views: 2573

Answers (3)

neu-rah
neu-rah

Reputation: 1693

add this to your draggable

stop: function(e,ui) {alert(ui.offset.top+","+ui.offset.left);}

(update)

ok, for all the siblings

    $( "#sortable" ).sortable({
        update: function(e,ui) {
            console.log(ui.item.parent());
            var i=ui.item;
            ui.item.parent().children().each(
                function (i,e) {
                    alert(ui.item.offset().top-$(e).offset().top);
                }
            );
        },
        revert: true
    });

here obtaining X relative distance, Y is always 0 but you can obtain it in similar way

Upvotes: 1

AvL
AvL

Reputation: 3093

I forked your fiddle: http://jsfiddle.net/44R97/ to check the position within the #sortable-list:

stop: function() {
    var myPos = $('#sortable').find('li.ui-draggable');
    alert("I am at position "+($('#sortable').find('li').index(myPos)+1));
}

Note, that .index() counts from 0. Therefor I added 1 to the result...

Upvotes: 1

Gerardo Lima
Gerardo Lima

Reputation: 6703

I updated your fiddle to show the coordinates of the clicked element with the following snippet:

$("li").click(function() {
    alert("I am at (" + this.offsetLeft + "," + this.offsetTop + ").");
});

Upvotes: 0

Related Questions