In jquery drop UI,how can I clone drag element into drop place with correct mouse position?

Question

suppose I have a panel with draggable element,

and a droppable container,when I drag the element into container,

<div id="panel">
    <div class="square"></div>  
</div>
<div id="canvas"></div>

I want clone the draggable element,but the issue is ,the reltive position info could be copy,too

So how can I just let the clone one stay at the mouse stay position?,here is my code

$('.square').draggable({
        revert:"valid"
});
$('#canvas').droppable({
    drop: function (e, ui) {
        $(ui.draggable).clone().appendTo($(this));
    }
})

here is example http://jsfiddle.net/AN5gt/

Answer 1

Well, first I would like to thank you for asking this question, and it solved one of my own question.

I want to make link of physical file listed in a folder tree. ie for picture gallery, i am showing complete folder tree list, and want the admin to drag the image and put in the gallery.

Here what I have done.

$('.square').draggable({
    revert:"valid",
    helper:"clone"
});
$('#canvas').droppable({
    drop: function (e, ui) {
        $(ui.draggable).clone().appendTo($(this));
    }
})