jquery - 多个 Draggables 找到 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);

            }
        });
    });
});