jquery可排序和droppable - 不能附加drop項目？

Question

我想將可刪除項目從可排序列表追加到目標可刪除框中，但我無法將被刪除項目追加到特定元素中。

我的jQuery，

$(".sortable").sortable({ 
    update: function(){ 
    // php update. 
    } 
}).disableSelection(); 


$(".droppable").droppable({ 
    activeClass: "ui-state-hover", 
    hoverClass: "ui-state-active", 
    drop: function(event, ui) { 

     var targetElem = $(this).attr("id"); 

     $(this) 
      .addClass("ui-state-highlight") 
      .find("p") 
      .html("Dropped! inside " + targetElem); 

      alert(targetElem); 

     var container = $(this).find("ul.dropped-items").css({border:"blue solid 1px"}); 

     container.append(ui.draggable.clone()); 

     ui.draggable.remove(); 

    } 
}); 

被丟棄的物品應附加到這個元素，

<ul class="dropped-items"> 
</ul> 

，但它只是沒有發生。我錯過了什麼，如何才能使它工作？

jsfiddle test page。

Answer 1

你可以刪除元素上的絕對位置的造型：

的Javascript

... 
container.append(ui.draggable.clone().css({position: 'relative', left: 0, top: 0, width: 'auto', height: 'auto'})); 
... 

Demo

或者，在添加造型做同樣的：

CSS

.dropped-items li { 
    position: relative !important; 
    top: 0 !important; 
    left: 0 !important; 
    width: auto !important; 
    height: auto !important; 
} 

Demo