jquery-ui之在 jquery drop UI 中，如何使用正确的鼠标位置将拖动元素克隆到放置位置

假设我有一个带有可拖动元素的面板，

和一个可放置的容器，当我将元素拖入容器时，

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

我想克隆可拖动元素，但问题是，相对位置信息也可以被复制

那么我怎样才能让克隆人停留在鼠标停留位置呢？，这是我的代码

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

这里是例子http://jsfiddle.net/AN5gt/

请您参考如下方法:

我建议删除还原以使动画更逼真。

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