jQuery的克隆不是拖動

Question

我使用jQuery的draggable和droppable以內容元素拖放到頁面元素的工作：

<h2>Page</h2> 

<div id='page-content'> 

</div> 

<div id='content-elements'> 
    <div id='text-element' class='content-element'>Text</div> 
    <div id='date-element' class='content-element'>Date</div> 
</div>​ 

我可拖動看起來JS是這樣的：

$elements.draggable({ 
    revert: true 
}); 

我在那裏有revert的原因是我希望內容元素返回到元素列表和「重複」添加到頁面。

我試着這樣做使用這個js爲可放開（創建使用的CoffeeScript）：

$('#page-content').droppable({ 
    drop: function(event, ui) { 
    var $element, $me; 
    $me = $(this); 
    $element = $(ui.draggable); 
    console.log($element.clone(false)); 
    return $element.clone().appendTo($me); 
    } 
}); 

這樣做是什麼讓這被拖UI元素，試圖克隆，然後將其添加到頁面。

但是這不起作用！即使我可以從ui.draggable中獲得div等。

我創建了一個的jsfiddle來說明這個問題： http://jsfiddle.net/sw4Gc/2/

爲什麼啊，爲什麼呢？

Answer 1

該元素被克隆在它處於相對位置並且位於該元素之外的狀態中。您必須刪除元素樣式：

var $newElement = $element.clone(); 
$newElement.attr('style', ''); 
$newElement.appendTo($me);