jQuery droppables - 更改元素下降

Question

我對jQuery有點新，希望有人能幫助我。

我試圖在（li）被刪除後將元素（li）更改爲另一個元素（div）。

樣品的編號：

$("#inputEl>li").draggable({ 
    revert: true, 
    opacity: 0.4, 
    helper: "clone" 
}); 
$("#dropEl") 
    .droppable({ 
     accept: ".drag", 
     hoverClass: "dropElhover", 
     drop: function(ev, ui) { 
      // change the li element to div here 
     } 
}); 

的問題是，當我使用

drop: function(ev, ui) { 
    $(ui.draggable).replaceWith("<div>Some content</div>"); 
} 

上面的功能被觸發時的原始可拖動元件將被禁用。

我正在使用最新的jQuery和jQuery UI穩定版本。

Answer 1

那麼，你想要的是保持你的原始列表完好無損，並將列表項放入dropEl？ 如何：

drop: function(ev,ui) { 
    $(this).append("<div>Some content</div>"); 
} 

或者，如果你想更換一個div元素列表中的元素，也有div元素拖動的，你可以試試這個：

drop: function(ev, ui) { 
     $(ui.draggable).replaceWith("<div>Some content</div>"); 
     $("#inputEl>div").draggable({ 
      revert: true, 
      opacity: 0.4, 
      helper: "clone" 
     }); 
    } 

原來的可拖動通話只有在被調用時物品纔可以拖動。如果您更改或添加元素並希望它們可拖動，則需要再次調用draggable（）函數。

Answer 2

thanx的回覆。

你的第一個代碼工作，並加上我也可以排序像這樣在可投放的div：

drop: function(ev, ui) { 
    $(this).append("<div>Some content</div>"); 
    $("#dropEl").sortable(); 
} 

現在的問題是我怎麼知道這名單是一旦我把它改成的div ？

我用下面的代碼獲取每個元素ID：

drop: function(ev, ui) { 
      revert: true; 
      var this_id = $(ui.draggable).attr("id"); 
      $(this).append('<div id="'+this_id+'">Some content</div>'); 
      $("#dropEl").sortable(); 
     }