Jquery перетаскиваемые клонированные div

Question

У меня проблема с реализацией моей веб-страницы с JQuery .Я знаю, что будет трудно понять, что я пытаюсь сделать, но я постараюсь сделать это максимально ясно (хотя мой английский не очень хорош).

У меня есть веб-страница с div, который можно перетаскивать внутри "оболочки-оболочки", и я реализовал, что при перетаскивании вы получаете клон (копию) этого main div, а затем вы можете перетащить этот клонированный div по экрану (внутри «обертки для содержимого»).Каждый раз, когда вы перетаскиваете 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, а позиция - top и left).

Итак, Я пытаюсь реализовать код , выполняемый только при загрузке страницы, , который создает и размещает клонированные элементы div, которые пользователь сохранил , на экране (внутри "содержимого").-wrapper ").

Я получил его с этим кодом (у меня есть значения: $ id - идентификатор main div, $ 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 .Итак, глупая ошибка, но я так рад, что наконец-то решил ее:)

Большое спасибо за ваши комментарии.