Jquery glissables et déposables, laissant tomber le contenu complet div

Question

J'ai un div:

<div> 
Hello there 
<img src="cnnc.png" /> 
</div> 




    <div id="cart"> 
<div class="placeholder">drop here</div> 
    </div> 

et je veux être en mesure de le faire glisser dans ma boîte largable et ajouter tout le contenu de cette div à ma boîte largable. Le problème est que mon code largable ne fait qu'ajouter du texte à la boîte, comment puis-je changer pour ajouter tout le contenu:

$("#cart").droppable({ 
     activeClass: "ui-state-default", 
     hoverClass: "ui-state-hover", 
     accept: ":not(.ui-sortable-helper)", 
     drop: function(event, ui) { 
      $(this).find(".placeholder").remove(); 
      $("<li></li>").text(ui.draggable.text()).appendTo(this); 
     } 

Answer 1

Vous pouvez le faire comme ceci:

$("#cart").droppable({ 
    activeClass: "ui-state-default", 
    hoverClass: "ui-state-hover", 
    accept: ":not(.ui-sortable-helper)", 
    drop: function(event, ui) { 
     $(this).find(".placeholder").remove(); 
     $("<li></li>").append(ui.draggable.contents().clone()).appendTo(this); 
    } 
}); 

Ce clone en fait les éléments En utilisant .contents(), si vous avez besoin de gestionnaires d'événements et de données, utilisez plutôt .clone(true).