Question

我的网页实施问题与 JQuery 有关。我知道我很难理解我想要做什么，但我会尽力使它尽可能清楚（尽管我的英语不是很好）。

我有一个网页，其中有一个 div可以在“包含 - 包装”中拖动，我已经实现了当你拖动它时，你得到了一个克隆（副本） 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，以及位置 - top和left）。

所以我正在尝试实现代码，在页面加载时执行，创建并将用户已保存的克隆div 置于屏幕上（在“收容包装”内）。

我使用此代码得到它（我有值： $ id - 主 div的ID， $ left 和 $ 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插件）调试它时，我发现永远不会执行可拖动的事件。

非常感谢你的时间，

Aleix

Answer 1

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

    window.onload = initialize;

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

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

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

非常感谢您的评论。

Jquery可拖动的克隆div

1 个答案: