jQuery UI Cloned Draggable Element не перетаскивается

Question

Я столкнулся с странной проблемой с пользовательским интерфейсом jQuery и клонированными элементами. Несмотря на то, что события jQuery UI, кажется, скопированы правильно, кажется, что события все еще относятся к исходному объекту DOM, а не к клонированному.

Этот JS скрипку показывает проблему: http://jsfiddle.net/XDrC5/

Вот HTML:

<button id="clone">Clone</button> 

<div id="source"> 
    <div id="elem"></div> 
</div> 

<div id="copy"> 
</div> 

И Javascript:

$(document).ready(function() { 
    $("#elem").resizable({ 
     containment:"parent" 
    }).draggable({ 
     containment:"parent" 
    }); 

    $("#clone").on("click", function() { 
    var newHTML = $("#source").clone(true); 

     $("#copy").html(newHTML.contents()); 
    }); 
}); 

Нажатие кнопки Clone правильно дублирует оранжевый квадрат в нижнем окне, но попытка перетащить новый квадрат приводит к исходному перемещению квадрата. Попытка изменить размер новой площади ничего не делает.

Это вызывает большие проблемы при попытке вызвать методы jQuery UI для клонированных элементов. Например, вызывая .draggable("destroy"); после того, как клон фактически удаляет перетаскиваемый из исходного элемента, рендеринга как нового, так и старого недвижимого.

Я не уверен, есть ли способ обойти это, если я просто плотный или если это неизбежная ошибка. Любая помощь приветствуется.

Answer 1

Я думаю, что в ответ на Свекла-свеклу проблема может быть, что при этом clone(true) копирования событий, присоединенных к предыдущим elem, что означает новый эль в стиле говорят, чтобы изменить размер в #source DIV, попробуйте без true а затем снова присоедините переменное событие к элементу внутри div #copy.

Я обновил JSFiddle - http://jsfiddle.net/XDrC5/2/ Кажется, это исправляет проблему с перетаскиванием.