jQuery可拖动克隆的div

Posted 2023-05-08

【中文标题】jQuery可拖动克隆的div

【英文标题】：Jquery draggable cloned divs

【发布时间】：2011-08-28 11:54:24

【问题描述】：

我在使用 JQuery 实现网页时遇到问题。我知道很难理解我要做什么，但我会尽量把它说得最清楚（尽管我的英语不是很好）。

我有一个网页，其中有一个 div 可以在“containment-wrapper”内拖动，我已经实现了 当你拖动它时，你会得到一个克隆 （副本）该 main div，然后您可以将这个克隆的 div 拖动到屏幕周围（在“containment-wrapper”内）。每次拖动 main div 时，都会创建另一个克隆的 div。效果很好。

代码：

$(".tool").draggable(
        containment: "#containment-wrapper",
        helper: 'clone',
        stop: function(event, ui) 
                 if($num==null) $num=0; //treat a number for the id of the next cloned div
                 else $num++;
                 $(ui.helper).clone(true).attr("id",$(this).attr("id")+$num).removeClass('tool ui-draggable ui-draggable-dragging ui-widget-content').addClass('element ui-widget-content').appendTo('#containment-wrapper');
            
    );

问题是我必须实现，当您加载该网页时，用户已将他的前 div 的情况保存在服务器中：所有克隆的位置div 的（我保存了 main div 的 id 和位置 - 顶部和左侧）。

所以我正在尝试实现一个代码，该代码仅在页面加载时执行，创建并将用户保存的克隆 div 放置在屏幕上 （在“containment-wrapper”内）。

我用这段代码得到了它（我有以下值：$id - main div、$left 和 的 id >$top - 我必须创建的 div 的位置）：

        var $obj = $("#"+$id); //get the main div
        if($num==null) $num=0; //treat a number for the id of the next cloned div
        else $num++;

        $obj.clone(true).attr("id",$id+"_"+$num).removeClass('ui-draggable ui-draggable-dragging ui-widget-content').addClass('ui-widget-content').appendTo('#containment-wrapper').css(  "position": "absolute", "left":$left + "px", "top":$top + "px"  );

它会在我想要的地方创建克隆的 div，但我的大问题是 当我尝试用鼠标拖动克隆的 div 时，在拖动该 div 的内部，它开始被拖动 main div （我从中创建克隆的 div）并创建另一个克隆的 div。所以无法拖动我的代码创建的那个克隆的 div。

我希望能够了解我的所有情况和问题...知道如何解决它吗？

我也尝试过做这样的事情（用它，我想在可拖动事件函数中处理位置）：

        var $obj = $("#"+$id);
        $obj.trigger("mousedown.draggable", [ev]);
        ev.stopPropagation();

但是当我用firebug（firefox插件）调试它时，我看到事件draggable永远不会执行。

非常感谢您的宝贵时间，

阿莱克斯

【问题讨论】：

欢迎来到 ***！你的英语很好！您是否可以在 jsfiddle.net 上提供一个关于您的问题的简明示例？

为什么不让“主 div”被拖动，而将克隆留在后面。然后交换 id 并将事件侦听器添加到克隆。

@Adrew：我正在研究它是如何工作的“jsfiddle.net”，因为我不知道它并且我从未使用过它。当我得到它时，我会告诉你；）谢谢！ // @Yman：谢谢你的想法。我理解，但我认为如果我必须从主 div 创建多个克隆 div，那么我将遇到同样的问题......无论如何我可以试试，谢谢！

【参考方案1】：

我解决了！ 代码没问题，唯一的问题是调用了负责创建克隆 div 的 initialize() 函数：我是使用此代码行（在 javascript 代码内）调用此函数：

    window.onload = initialize;

如果我删除此行并从$(document).ready 函数调用initialize() 函数，那么一切正常！ :)

$(document).ready(function() 
        [...]
        initialize();
        );

我意识到这一点，试图简化 jsfiddle.net 中的代码。所以，愚蠢的错误，但我很高兴终于解决了它:)

非常感谢你们的cmets。