Uso dell'interfaccia utente jQuery: modifica dell'elemento trascinato a rilascio

Question

Quando si utilizzano i draggable e gli oggetti droppabili dell'interfaccia utente jQuery, come si modifica l'elemento trascinato sulla caduta? Sto cercando di trascinare un DIV su un altro DIV ordinabile. A goccia, mi piacerebbe cambiare le classi sul calo DIV e modificare il suo contenuto HTML interno.

Dopo aver letto varie domande StackOverflow, il mio codice simile a questo:

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

Non funziona per me. :-(

Una copia completa del mio codice si trova a http://www.marteki.com/jquery/bugkilling.php

Answer 1

Prendendo il codice javascript completo dal link che hai dato, è possibile modificare nel modo seguente per farlo funzionare:.

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

C'erano un paio di questioni:.

1. l'evento di rilascio (che si mostra nella sua domanda) non è stato a sparare perché non eri accept ing il contenuto giusto
2. Se si dispone di entrambi .sortable & .droppable si finisce con uno strano doppio evento di attivazione. Ciò non è necessario in ogni caso, dal momento che puoi catturare efficacemente l'evento drop dagli eventi di ordinabile dato che lo hai collegato con il draggable.

Un'altra cosa da notare - sarebbe stato più bello di utilizzare eventi del ordinabile receive invece di stop (dal fermata viene licenziato ogni volta che qualsiasi ordinamento ferma & ricevono è specificamente lì per sparare quando si rilascia una nuova voce nella l'elenco di ordinamento), ma non funziona correttamente perché lo item non è stato ancora aggiunto all'elenco ordinabile, quindi non è possibile modificarlo in quel punto. Funziona bene allo stop semplicemente perché nessuno degli altri elementi ordinabili ha la classe elemtxt.