jQuery droppables - Change élément sur drop

Question

Je suis un peu nouveau à jQuery et espère que quelqu'un peut m'aider.

J'essaye de changer un élément (li) en un autre élément (div) après que le (li) ait été abandonné.

Exemple de code:

$("#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 
     } 
}); 

Le problème est, quand j'utiliser

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

les éléments déplaçables originaux seront désactivés lorsque la fonction ci-dessus est déclenché. J'utilise les dernières versions stables jQuery et jQuery UI.

Answer 1

Alors, qu'est-ce que vous voulez est de garder votre liste originale intacte et déposer des éléments de la liste dans dropEl? Que diriez-vous ceci:

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

Ou, si vous voulez remplacer les éléments de la liste avec un élément div et ont également l'élément div draggable, vous pouvez essayer ceci:

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

L'appel draggable d'origine ne rend les objets que draggables au moment où ils sont appelés. Si vous modifiez ou ajoutez des éléments et souhaitez qu'ils soient déplaçables, vous devrez appeler à nouveau la fonction draggable().

Answer 2

merci pour la réponse.

Votre premier code travaillé, et en plus je peux aussi trier les divs dans le largable comme ceci:

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

Maintenant, le problème est de savoir comment puis-je savoir quelle liste est que une fois que je l'ai changé pour divs ?

J'utilise le code suivant pour obtenir chaque élément 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(); 
     }