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

Posted 2023-02-22

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

【英文标题】：In jquery drop UI,how can I clone drag element into drop place with correct mouse position?

【发布时间】：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/

【参考方案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));
    
)