Get access to data set via data() in dragged element?

Question

Hi,

I have a draggable element. I used jquery's data() method on it:

var element = $('<div id='foo'>hi</div>');
element.appendTo(body);
element.data('test', "some data");
element.draggable();
...

when I try to fetch the data, from a button click for example, this works fine:

var data = $('#foo').data('test'); // ok.

it does not work though when I try dragging the element, somehow the data gets undefined during the drag operation (and becomes available again afterwards):

$(function() {
    $("#parentPanel").sortable({
        start: function(event, ui) {
            var data1 = $('#foo').data('test'); // undefined!
            var data2 = ui.item.data('test');   // undefined!      
        }
    }).disableSelection();  
});

now if I were to drag another element, the explicitly referenced data1 element becomes available again in the start() handler. It is also available again if I accessed it via a button click for example too.

How can we get access to data set with the data() method for the element being dragged?

Thanks