Несколько Draggables Найти позиции X и Y

Question

Привет Я создаю прототип, который позволит пользователю создавать несколько DIV. После создания DIV он должен быть перетаскиваемым, после его сброса он должен отображать позицию x и y в DIV.

Проблема в том, что как только я создал несколько 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); 

      } 
     }); 
    }); 
});