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

【问题标题】：In jquery drop UI,how can I clone drag element into drop place with correct mouse position?在 jquery drop UI 中，如何使用正确的鼠标位置将拖动元素克隆到放置位置？
【发布时间】：2012-03-28 02:01:59
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery-ui drag-and-drop clone

【解决方案1】：

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

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

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

【讨论】：

与前一个重叠。有没有办法将元素精确地放在鼠标位置？

【解决方案2】：

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

我想创建文件夹树中列出的物理文件的链接。即图片库，我正在显示完整的文件夹树列表，并希望管理员将图像拖放到图库中。

这是我所做的。

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

【讨论】：