Вот что я пытаюсь сделать:
Я хочу создать панель навигации, которая управляет различными слайдами и отражает изменения. Я не хочу перетаскивать или изменять размеры клонированных элементов в навигационной панели, мне нужно, чтобы они были обновлены, чтобы они выглядели как предварительные просмотры связанных с ними слайдов.
У меня есть один слайд ("slide_1"), содержащий несколькоперетаскиваемые / изменяемые размеры элементов, которые я буду клонировать в своем элементе панели навигации (#nav_bar).
Метод 1:
var fScaleAmount = 0.1;
var new_slide_id = "slide_page_1";
$('#slide_1').clone().attr("id",new_slide_id).appendTo("#nav_bar");
$("#"+new_slide_id ).css({
"-moz-transform": "scale(" + fScaleAmount + ")",
"-moz-transform-origin": "0% 0%",
"-webkit-transform": "scale(" + fScaleAmount + ")",
"-webkit-transform-origin": "0% 0%",
"-ms-transform": "scale(" + fScaleAmount + ")",
"-ms-transform-origin": "0% 0%"
});
Чтобы избежать путаницы между оригинальным элементом слайда и его клоном, я изменил все идентификаторы в клоне следующим образом:
var str;
$("#"+new_slide_id).find("[id]").each(function() {
str = this.id;
str = str.substring(str.indexOf('_'));
this.id = new_slidev_id + str;
})
Это создаст клон на панели навигации со всеми элементами, которые успешно отображаются на слайде_1.
Однако я больше не могу перетаскивать элементы в слайде_1, и изменяемый размер становится ошибочным.
Я попытался уничтожить перетаскиваемый элемент в клонированных элементах следующим образом, который я поместил в предыдущий цикл:
$(this.helper).remove();
$(this.draggable).draggable("destroy");
Но это не решает проблему.
Если не считать удаления классов по одному, есть ли лучший способ для клонированных элементов не наследовать перетаскиваемые / изменяемые размеры функции от их исходных элементов?