Блог

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

У меня есть веб-страница с разделом, который можно перетащить внутрь «оболочки-оболочки», и я реализовал это, когда вы перетаскиваете его, вы получаете клон (копию) этого основного раздела, а затем вы можете перетаскивать этот клонированный раздел по экрану (внутри «оболочки-оболочки»). Каждый раз, когда вы перетаскиваете основной раздел, создается другой клонированный раздел. Это работает отлично.

Код:

 $(".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');
            }
    });
  

Проблема в том, что я должен реализовать, чтобы при загрузке этой веб-страницы, пользователь сохранял положение своего предыдущего подразделения на сервере: положение всех клонированных подразделений (я сохранил идентификатор основного подразделения и положение — сверху и слева).

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

Я получил это с помощью этого кода (у меня есть значения: $ id — идентификатор основного подразделения, $ left и $ top — позиция подразделения, которое я должен создать):

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

Я надеюсь, что возможно понять всю мою ситуацию и мою проблему… Есть идеи о том, как я мог бы это решить?

Я также пытался сделать что-то подобное (с его помощью я думал обработать позицию в функции перетаскиваемого события):

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

Но когда я отлаживаю его с помощью firebug (firefox pluggin), я вижу, что событие draggable никогда не выполняется.

Большое, очень большое спасибо за ваше время,

Aleix

Я решил это! Код был в порядке, единственной проблемой был вызов функции initialize(), которая была ответственна за создание клонированных divs: я вызывал эту функцию с помощью этой строки кода (внутри кода JavaScript):

     window.onload = initialize;
  

Если я удалю эту строку и вызову initialize() функцию из $(document).ready функции, то все будет работать нормально !! 🙂

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

Я понял об этом, пытаясь упростить код в jsfiddle.net. Итак, глупая ошибка, но я так рад, что наконец-то решил ее 🙂

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