Multiple Draggables Find the X and Y Positions

Question

Hi I'm creating a prototype that will enable the user to create multiple DIVs. Once a DIV is created it should be draggable, once dropped it should display the x and y position within the DIV.

The problem is that once i have created several DIVs they can all be dragged and dropped but they all display the position of the first DIV.

http://jsfiddle.net/aX92L/

jQuery

$(function () {
    $("#add").click(function () {
        $("body").append('<div class="note"><p>note</p></div>');
        $(".note").draggable();
        $("body").droppable({
            accept: '.note',
            activeClass: 'ui-state-hover',
            hoverClass: 'ui-state-hover',
            drop: function (event, ui) {
                var position = $(".note").position();
                $(".note").text("left: " + position.left + ", top: " + position.top);

            }
        });
    });
});

If anyone can help it would be much appreciated.

Answer 1

Use ui.helper

$(function () {
    $("#add").click(function () {
        $("body").append('<div class="note"><p>note</p></div>');
        $(".note").draggable();
        $("body").droppable({
            accept: '.note',
            activeClass: 'ui-state-hover',
            hoverClass: 'ui-state-hover',
            drop: function (event, ui) {
                var position = $(ui.helper).position();
                $(ui.helper).text("left: " + position.left + ", top: " + position.top);

            }
        });
    });
});