在jquery drop UI中，如何将拖动元素克隆到具有正确鼠标位置的drop位置？

Question

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

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

<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/示例

Answer 1

首先，我想感谢你提出这个问题，它解决了我自己的一个问题。

我想使物理文件在文件夹树中列出的链接。ie的图片库，我正在显示完整的文件夹树状列表，并希望管理员拖拽图像，并放在画廊。

这就是我所做的。

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

Answer 2

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

    $('.square').draggable({  
      helper:"clone"  
    });  

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