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

Lorsque vous utilisez jQuery UI draggables et droppables, comment Modifiez-vous l'élément glissé-et-déposé sur drop? J'essaie de faire glisser un DIV à un autre DIV triable. Sur drop, je voudrais changer les classes sur le DIV abandonné et changer son contenu innerHTML.

Après avoir lu diverses questions de 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>');
        }
    }
})

Ça ne marche pas pour moi. :-(

Une copie complète de mon code se trouve à http://www.marteki.com/jquery/bugkilling.php.

31
demandé sur Naa Marteki Reed 2009-07-22 04:37:57

1 réponses

En prenant le code javascript complet à partir du lien que vous avez donné, vous pouvez le modifier 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 affichez dans votre question) ne se déclenchait pas parce que vous n'étiez pas acceptdans le bon contenu.
  2. Si vous avez les deux .sortable & .droppable vous vous retrouvez avec des événements doubles étranges tir. Ceci est inutile de toute façon, car vous pouvez effectivement saisir l'événement drop des événements de sortable étant donné que vous l'avez lié avec le déplaçable.

Une autre chose à noter-Il aurait été plus agréable d'utiliser l'événement receive de la triable au lieu de stop (puisque stop est déclenché chaque fois que le tri s'arrête et la réception est spécifiquement là pour se déclencher lorsque vous déposez un nouvel élément dans la liste de tri), mais cela ne fonctionne pas correctement car le item Cela fonctionne bien sur stop simplement parce qu'aucun des autres éléments triables n'a le elemtxt classe.

52
répondu Alconja 2009-07-22 01:56:28