Helper personalizzato per UI jQuery Draggable

Question

Ho un'interfaccia utente jQuery trascinabile, e ho provato a creare un helper personalizzato che conterrebbe alcune ma non tutte le informazioni dell'elemento originale.

Ecco i miei elementi trascinabili;

<ul> 
    <li><div>Name</div> <span>12-12-2011</span></li> 
    <li><div>Another name</div> <span>12-12-2011</span></li> 
</ul> 

E jQuery;

$("ul li").draggable(function(){ 
    helper: function(){ 
    return $("<div></div>"); 
    } 
}); 

L'idea sarebbe che durante il trascinamento, l'utente avrebbe un supporto che contiene solo il nome, ma non l'elemento tempo.

Il mio codice effettivo è leggermente più complesso di questo anche, quindi quello che sto davvero cercando è un selettore che mi permetta di selezionare l'elemento originale, o una copia di esso, e quindi fare tutti i tipi di magia jQuery su di esso (elementi filtranti, aggiunta di nuovi elementi, classi, ecc.)

Tuttavia, per la mia vita non riesco a trovarlo, la documentazione di trascinamenti trascinabili e nessuno a #jquery mi aiuterebbe. Qualche idea?

Grazie in anticipo!

Answer 1

In primo luogo il modo di chiamare draggable è difettoso. Il parametro previsto è un oggetto letterale, non una funzione.

this è l'elemento attualmente trascinato nella funzione helper.

Avere il seguente codice HTML

<ul> 
    <li><div class="name">Name</div> <span>12-12-2011</span></li> 
    <li><div class="name">Another name</div> <span>12-12-2011</span></li> 
</ul> 

Si può fare questo:

$('ul li').draggable({ 
    helper: function() { 
     //debugger; 
     return $("<div></div>").append($(this).find('.name').clone()); 
    } 
}); 

Nota: ho aggiunto classe al <div> che rappresenta il nome per il gusto di selezione, ma è possibile trovare qualsiasi altro modo per farlo.

Ecco uno jsfiddle da controllare.

Answer 2

OK, con un test rapido di seguito funzionerà ....

$("ul li").draggable({ 
    helper: function() { 
     return $("<div>hello</div>"); 
    } }); 

preavviso non si passa una funzione come parametro trascinabile. Inoltre, ho aggiunto "ciao" all'esempio in modo che il DIV helper contenga effettivamente qualcosa.

EDIT: Questo sembra per evitare che l'elemento che è caduto, hmmm ...

A FIX: Non abbastanza, ma questo funziona, forse può dare alcune idee per il miglioramento ...

var remember; 
$("ul li").draggable({ 
    helper: 'original', 
    start: function(e, ui) { 
     remember = $(this).html(); 
     $(this).html("<div>hello</div>"); 
    }, 
    stop: function(e, ui) { 
     $(this).html(remember); 
    } 
}); 

Example Here

Se non ti piace l'idea di "ricordare" variabile sembra essere ok per aggiungere un'opzione personalizzata per l'oggetto trascinabile che ca n tenere l'HTML originale ...

$("ul li").draggable({ 
    helper: 'original', 
    start: function(e, ui) { 
     $(this).draggable("option", "olddata", $(this).html()); 
     $(this).html("<div>hello</div>"); 
    }, 
    stop: function(e, ui) { 
     $(this).html($(this).draggable("option", "olddata")); 
    } 
}); 

Answer 3

Una possibile soluzione è

Fiddle: http://jsfiddle.net/SWbse/

$(document).ready(function() { 
     $("ul li").draggable({ 
     helper: 'clone', 
     start: function(event, ui){ 
      ui.helper.children('span').remove(); 
     }  
    }); 
    });