Клонирование с сохранением возможностей jQuery UI

Имеется приблизительно такая структура

<div id="img_id">

<div id="ne">

    <img id="main_img" src="" width="350" height="300" />

    <div id="wrapper">

            <div id="able">

        </div>

        </div>

    </div>

Она клонируется

$("#img_id").clone(true).appendTo($('#clone1'))

А затем через какое то время восстанавливается

$("#clone1").clone(true).appendTo($('#img_id'))

Так вот на элементы ne, able и другие навешаны возможности jquery ui такие как draggable и resizable

После восстановления из клона эти возможности уже не работают

В чем может быть проблема ?

Могу предположить,что после вставки клона обратно в документ нужно навешивать события заново или использовать live, delegate если это возможно

Цитата ("mirekua"):

Так вот на элементы ne, able и другие навешаны возможности jquery ui такие как draggable и resizable

Скорее всего это у вас сделано по событию onLoad, типа $.ready... Это событие обрабатывается 1 раз при загрузке документа, а потом хранятся не id тэгов, а ссылки на конкретный объект. При клонировании вы создаете новый объект, хоть и с тем же id, и его свойства естественно пусты, поскольку это уже другой объект. Выходов несколько. Присвоить новому объекту свойства при его создании; вызвать принудительно переобработку документа (например изменить содержимое тэга head, но это не всегда просто и удобно); использовать делегирование событий как написал _VersouL_ (лично мне не очень нравится как это работает в jquery, хотя может мне просто не повезло).

Цитата ("elosoft"):

Скорее всего это у вас сделано по событию onLoad, типа $.ready...

Описанная мною структура актуальна только в определенном разделе сайта.

То есть она формируется не по onLoad, а при переходе пользователя в соответствующий раздел

Цитата ("elosoft"):

При клонировании вы создаете новый объект, хоть и с тем же id

ID меняется. Иначе при работе с ID Вы будете вызывать методы клона, а не оригинала.

То есть в клоне вообще изменены все ID. А при обратном копировании клона в оригинал ID восстанавливаются

Но главное о чем я забыл написать в описании так это о том, что мои стандартные обработчики событий работают после восстановления из клона просто отлично.

А вот проблема заключается только в плагинах jQuery UI.

Я пока склоняюсь к тому, что прав наверное _VersouL_

Но еще я раскопал, что в jQuery UI предусмотрена работа с клонированием и существует например helper: 'clone'

Но я не разобрался пока как это использовать

Если известны Id новых элементов (клонов) и их количество мало, то возможно стоит сразу добавить в события список всех Id, в т.ч. пока не существующих.

upd: а вообще (что-то там).live() прекрасно работает.

Цитата ("AlekartRu"):

а вообще (что-то там).live()

Ну я разве, что с live() еще не пробовал.

Да id новых элементов известны.

Вешать события по новой при восстановлении из клона я уже попробовал.

Как ни странно это совершенно ничего не дает.
Я уже даже пробовал уничтожать события draggable и resizeble при копировании в клон
А потом естественно вешать их по новой при копировании из клона

Результат 0

helper: 'clone' о котором я писал отвечает за совсем другой функционал. Мне он не нужен

То есть не понятно в чем причина.

Я даже пробовал удалять навешанные draggable классы при клонировании

Также ни к чему не приводит

AlekartRu, .live() - это лишь способ навешивать события, а не плагины. Вы путаете.

mirekua, не до конца понял сути проблемы. Нужно навешивать эти плагины после каждого клонирования элемента. Мне кажется у вас проблема из-за одинаковых айдишников (второй появляется при клонировании). В ДОМе не должно быть двух элементов с одним и тем же id, все последующие операции с ними могут некорректно происходить. И поэтому же советую навешивать плагины на классы $(".element", а не id $("#id".

$(".who").draggable();

$(".who").clone().appendTo(".append")

$(".who").draggable()

mirekua, вот тут посмотрите, похожая проблема (на примере datepicker) ссылка

Цитата ("Ap6y3"):

не до конца понял сути проблемы

Основная задача в том, что-бы объекты после клонирования сохранили за собой свойства предоставляемые плагинами draggable, resizable и др.

$(".who").draggable();

$(".who").clone().appendTo(".append")

$(".who").draggable()

Если рассматривать Ваш код то второй вызов $(".who").draggable() не уместен.
Фактически требуется, что-то такое

$(".who").draggable();

$(".who").clone().appendTo(".append")

$(".append").clone().appendTo(".who")

И при этом после последней операции клонирования $(".who" должен сохранить за собой способность к draggable()
А вот требуется ли в процессе всех операций вызывать как в Вашем примере повторно $(".who".draggable() это уже другой вопрос

Главное, что-бы $(".who" сохранил за собой способность к draggable()

При чем этого не происходит ни под каким соусом! Вызываете Вы повторно $(".who".draggable() или нет

Цитата ("Ap6y3"):

В ДОМе не должно быть двух элементов с одним и тем же id

Я уже писал о том, что элементов с одним и тем же ID НЕТ. То есть я просто опускаю в общем описании другие операции, которые происходят с
$(".who" после клонирования в (".append". В процессе этих операций все ID изменяются. Так, что и здесь нет причины для конфликтов

И как я уже писал в верхнем посте я уже перепробовал все возможные варианты. В том числе и с просто чисткой объекта $(".who" от классов навешанных .draggable() в процессе его клонирования в (".append".. А потом повторной попытки навесить уже очищенный от классов .draggable() при его клонировании снова в $(".who" То есть даже при вызове $(".who".draggable(); объект $(".who" после клонирования не приобретает способности к .draggable()


Цитата ("e-shpak"):

вот тут посмотрите

В данном примере человек уже не правильно вызывает инструкции клонирования
Вызывать $(".who".draggable("destroy'; перед клонированием $(".who" в (".append" я также пробовал.

И это также ничего не дает. То есть в последующем при вызове $(".who".draggable(); объект $(".who" после клонирования не приобретает способности к .draggable()

Цитата ("mirekua"):

В данном примере человек уже не правильно вызывает инструкции клонирования

Не пользовалась методом клонирования. В чем ошибка?

А unbind() пробовали?

Сайт покажете может?

Цитата ("e-shpak"):

В чем ошибка?

myDiv.clone(false).insertAfter(myDiv);

Такое клонирование происходит без сохранения свойств и соответственно обработчиков событий
В случае с

myDiv.clone(true).insertAfter(myDiv);

При клонировании сохраняется функциональность таких стандартных обработчиков как onmouseover и т.д.

Но опять же это не распространяется на draggable и resizable


Цитата ("e-shpak"):

Сайт покажете может?

Сайт пока на локалке

Цитата ("e-shpak"):

А unbind() пробовали?

Думаю такое не будет работать. Ведь способность объекта к draggable или resizable это не стандартные события
И соответственно для таких способностей объекта предусмотрены специальные методы draggable("destroy";, которые правда также ничего не дают

Цитата ("mirekua"):

Она клонируется

Код:
1$("#img_id".clone(true).appendTo($('#clone1')

А затем через какое то время восстанавливается

Код:
1$("#clone1".clone(true).appendTo($('#img_id')

Так вот на элементы ne, able и другие навешаны возможности jquery ui такие как draggable и resizable

После восстановления из клона эти возможности уже не работают

В чем может быть проблема ?

Клонируется это понятно, а вот восстанавливается не совсем. То есть из какого то узла делается клон (копия) встраивается в другой узел. Но оригинал же никуда не девается. Зачем его восстанавливать? Восстанавливают я так понимаю удаленный из DOM (но не из объекта jQuery) узел, методом .detach(), а не .clone().
То есть я предлагаю вместо clone(), использовать .detach():

var par= $("#img_id").parent();

a=$("#img_id").detach();	// удаляем узел из DOM

$("#clone1").append(a);        // восстанавливаем его в другом месте

$("#clone1").remove();           // удаляем этот узел если надо

par.append(a);                        // восстанавливаем его в прежнем месте

И всё это без clone()
Вы можете, более подробный кусок кода привести в пример?

Цитата ("radar0080"):

То есть я предлагаю вместо clone(), использовать .detach():

Ваша версия очень интересна. Думаю такое может работать

Цитата ("radar0080"):

Вы можете, более подробный кусок кода привести в пример?

Но у меня появилась еще другая идея. Тем не менее похоже и Ваша версия заслуживает внимания

Clone(false) и clone(true).
false & true это всего лишь опции метода. И это не ошибка.
Можно хоть как написать, это все равно не повлияет на работу плагинов, как писали выше.

Ну вот смотрите: ссылка
Это пример из ответа по ссылке, что я привела. Клонируется элемент, вставляется в дом, удаляются класс datepicker-а, данные, unbind-ся хандлеры (без него вроде тоже должно работать), вызывается плагин.

Т.е. должно быть примерно так:

$(".who").draggable();

$(".who").clone().appendTo(".append")

$(".who").removeClass('draggable').removeData('draggable').unbind().draggable();

Заменила datepicker из примера вашим плагином ссылка

mirekua, Все будет работать и с clone()

Цитата ("mirekua"):

Основная задача в том, что-бы объекты после клонирования сохранили за собой свойства предоставляемые плагинами draggable, resizable и др.

done

$(".who").draggable();

$(".who").clone().appendTo(".append")

$(".who").removeClass('draggable').removeData('draggable').unbind().draggable();

а можно ещё проще:

$(".who").draggable();

$(".who").clone().appendTo(".append")

$(".who").draggable( "destroy" ).draggable();

Цитата ("e-shpak"):

Можно хоть как написать, это все равно не повлияет на работу плагинов, как писали выше.

Вот как раз с clone(true) draggable и не работает


ссылка

Хоть на счет unbind() Вы оказались правы

Но мне также необходимо сохранять и работоспособность других обработчиков, кроме работоспособности плагинов jquery ui
Именно для этого и существует возможность указать clone(true)

И я проверил и в своем проекте без clone(true) она не сохраняется
Тем не менее сохраняется способность объекта к draggable, а также и его местоположение

Цитата ("e-shpak"):

done

А главное таким образом не получится восстановить объект из клона с способностью к resizable

Цитата ("mirekua"):

А главное таким образом не получится восстановить объект из клона с способностью к resizable

Почему? Только что проверила. Работает.
Вот: ссылка

А позиции и прочие параметры блока перед клонированием можно считывать и записывать куда-нибудь, хоть в те же input:hidden-ы в сам блок по событию drag
(ui.position.left & ui.position.top)
Потом из них восстанавливать и инпуты удалять. Пример в помощь ссылка

Цитата ("e-shpak"):

Только что проверила. Работает.

Да. Действительно. Просто такие ньюансы работы с JQuery ui для меня новое. И я путаюсь пока

Но все таки остается вопрос о поддержке при клонировании и других обработчиков одновременно с плагинами JQuery ui

Почему оно с clone(true) не работает я например не понимаю