多个可拖动查找X和Y位置

Question

您好我正在创建一个原型，使用户能够创建多个DIV。一旦创建了DIV，它应该是可拖动的，一旦掉落它应该在DIV中显示x和y位置。

问题是，一旦我创建了几个DIV，它们都可以被拖放，但它们都会显示第一个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);

            }
        });
    });
});

如果有人能提供帮助，我们将不胜感激。

Answer 1

使用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);

            }
        });
    });
});