jQuery UI不接受在新元素上的droppable行爲

Question

我做了一個簡單的腳本來添加<ul>中的元素，這些元素是可排序的。當我添加新元素<li>時，元素是可排序的，我可以將它拖放到其他位置，但是我不能將其他元素放在新創建元素的位置上。我希望你能理解我。我嘗試應用相同的設置在手動添加元素，但它不工作：

$(document).ready(function(){ 
    $("ul").sortable({ 
     containment : 'document', 
     tolerance: 'pointer', 
     cursor: 'pointer', 
     revert: 'true', 
     opacity : 0.6, 
     connectWith : "ul", 
     placeholder: 'border', 
     items : 'li:not(.naslov)' 
    }).disableSelection(); 

    $("li").ellipsis(); 

    $("#addGroup").click(function(){ 
     $(".kolone").append(
      '<ul class="prvi"><li class="naslov">Naslov1</li><li></li></ul>' 
     ).sortable({ 
      containment : 'document', 
      tolerance: 'pointer', 
      cursor: 'pointer', 
      revert: 'true', 
      opacity : 0.6, 
      connectWith : "ul", 
      placeholder: 'border', 
      items : 'li:not(.naslov)' 
     }).disableSelection(); 
    }); 
}); 

Answer 1

我從「UL」到「kolone」

$(".kolone").sortable({ 
    containment: 'document', 
    tolerance: 'pointer', 
    cursor: 'pointer', 
    revert: 'true', 
    opacity: 0.6, 
    connectWith: "ul", 
    placeholder: 'border', 
    items: 'li:not(.naslov)' 
}).disableSelection(); 

$("li").ellipsis(); 

$("#addGroup").click(function() { 
    $(".kolone").append('<ul class="prvi"><li class="naslov">Naslov1</li><li></li></ul>').sortable({ 
     containment: 'document', 
     tolerance: 'pointer', 
     cursor: 'pointer', 
     revert: 'true', 
     opacity: 0.6, 
     connectWith: "ul", 
     placeholder: 'border', 
     items: 'li:not(.naslov)' 
    }).disableSelection(); 
}); 

而在第一線改變選擇固定它科洛內代表專欄。