在jquery拖放UI中，如何将拖动的元素克隆到放置位置并保持正确的鼠标位置？

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));
    }
})

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

- hh54188

Answer 1

我建议去掉还原，这样动画会更加逼真。

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

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

- Akira Kronic

---

它与先前的重叠了。有没有办法将元素精确地放置在鼠标位置？ - Manish Jangir

Answer 2

首先，感谢您提出这个问题，它解决了我的一个问题。

我想要生成文件夹树中物理文件的链接。例如对于图片库，我正在显示完整的文件夹树列表，并希望管理员可以将图像拖放到库中。

这是我所做的。

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

- Aamir Mahmood