Come personalizzare l'helper utilizzando draggable in jQuery-UI

Question

Voglio creare un elemento personalizzato con il testo tratto dall'elemento "trascinato" utilizzando una funzione di supporto. Il mio problema è che l'interfaccia utente è indefinita, quindi non so come afferrare la fonte del trascinamento.

$('.draggable').draggable({ 
    helper: function(event, ui) { 
     var foo = $('<span style="white-space:nowrap;">DRAG TEST</span>'); 
     return foo; 
    } 
}); 

Answer 1

La funzione helper si sta applicando is invoked the following way:

$(o.helper.apply(this.element[0], [event])) 

Ciò significa che this si riferisce alla .draggable si desidera all'interno di quella funzione, ad esempio:

$('.draggable').draggable({ 
    helper: function(event) { 
    return $('<span style="white-space:nowrap;"/>') 
      .text($(this).text() + " helper"); 
    } 
}); 

You can test it out here.