jQuery how to destroy draggable with clone()

Question

$('div').draggable();
var x = $('#container').clone().find('div').draggable('destroy').end().html();
$('#save').val(x);

How do i destroy draggable() after we use clone. The html still contains the class .ui-draggable after destroying. Why is this happening and how can i work around it without having to to use removeClass() . destroy should handle this. Check http://jsfiddle.net/rzfPP/50/

Answer 1

Assigning .draggable() to the newly cloned divs and then immediately destroying those seems to do the trick:

$('div').draggable();
var x = $('#container').clone().find('div').draggable().draggable('destroy').end().html();
$('#save').val(x);