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);