Utilisation du glisser-déposer de l'interface utilisateur jQuery: modification de l'élément déplacé lors de la suppression

Question

Lors de l'utilisation des objets dragguables et droppables de l'interface utilisateur jQuery, comment modifier l'élément glissé-déposé lors de la suppression? J'essaie de faire glisser un DIV à un autre DIV triable. Sur drop, je voudrais changer les classes sur la DIV drop et changer son contenu innerHTML.

Après avoir lu diverses questions StackOverflow, mon code ressemble à ceci:

$(".column").droppable({ 
    accept: '.element-dragging', 
    drop: function(event, ui) { 
     if ($(ui.draggable).hasClass("elemtxt")) { 
      $(ui.draggable).replaceWith('<div class="element element-txt">This text box has been added!</div>'); 
     } 
    } 
}) 

Il ne fonctionne pas pour moi. :-(

Une copie de mon code est situé à http://www.marteki.com/jquery/bugkilling.php

Answer 1

Prendre le code complet javascript à partir du lien que vous avez donné, vous pouvez le changer comme suit pour le faire fonctionner.

$(function() { 
    $(".elementbar div").draggable({ 
     connectToSortable: '.column', 
     cursor: 'move', 
     cursorAt: { top: 0, left: 0 }, 
     helper: 'clone', 
     revert: 'invalid' 
    }); 
    $(".elementbar div, .elementbar div img").disableSelection(); 
    $(".column").sortable({ 
     connectWith: '.column', 
     cursor: 'move', 
     cursorAt: { top: 0, left: 0 }, 
     placeholder: 'ui-sortable-placeholder', 
     tolerance: 'pointer', 
     stop: function(event, ui) { 
      if (ui.item.hasClass("elemtxt")) { 
       ui.item.replaceWith('<div class="element element-txt">This text box has been added!</div>'); 
      } 
     } 
    }); 
    $(".element").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"); 
}); 

Il y avait quelques problèmes.

1. l'événement drop (que vous présentez dans votre question) n'a pas été mise à feu parce que vous ne accept ing le bon contenu
2. Si vous avez les deux .sortable & .droppable vous finissez avec des événements bizarres de double événements. De toute façon, cela n'est pas nécessaire, car vous pouvez récupérer efficacement l'événement drop des événements de triable, étant donné que vous l'avez lié au draggable.

Une autre chose à noter - il aurait été plus agréable d'utiliser l'événement receive du sortable au lieu de stop (depuis l'arrêt est congédié chaque fois que les arrêts de tri & reçoivent est spécifiquement là pour le feu lorsque vous déposez un nouvel élément dans la liste de tri), mais cela ne fonctionne pas correctement car le item n'a pas encore été ajouté à la liste de tri, vous ne pouvez donc pas le modifier à ce stade. Cela fonctionne correctement à l'arrêt simplement parce qu'aucun des autres éléments triables n'a la classe elemtxt.