2010-01-27 9 views
10

Nel comportamento standard dimostrato a http://jqueryui.com/demos/sortable/ quando si trascina un elemento nell'elenco, viene visualizzato un elemento segnaposto in cui l'elemento viene eliminato.jquery UI ordinabile: come lasciare l'originale visibile fino alla caduta?

Tuttavia, la posizione originale dell'articolo da eliminare non è indicata.

desidero lasciare la posizione originale visibile finché la goccia, in modo che il feedback visivo è analogo al modo in cui l'originale viene lasciato in posizione per l'opzione "semitrasparente clone" illustrata a http://jqueryui.com/demos/draggable/#visual-feedback

Is c'è un modo in cui posso farlo con ordinabile?

Grazie!

risposta

12

Così un approccio che sembra funzionare (pensato è sicuramente un hack) è quello di passare l'opzione

start: function (e, ui) { ui.item.show();}

che rende visibile l'originale nascosta automaticamente (ui.item).

E, più in generale, è possibile utilizzare la funzione start per modificare l'elemento.

+0

Grazie. Questo mi ha aiutato anche a –

+0

Ma scompare alla caduta – Gino

+0

Bello. Ho anche finito per aggiungere una lezione all'avvio e rimuoverla in stop. Quindi ho impostato l'opacità della classe css. Ho trovato questo ha aiutato a illustrare quale era l'elemento originale. – RevNoah

0

L'opzione helper: 'clone' lascerà in posizione l'elemento originale, mentre crea un nuovo elemento DOM che viene effettivamente trascinato dal mouse. (Inoltre, si utilizza l'opzione opacity: 0.7 per creare l'effetto "semitrasparente" sull'helper.)

Non sono sicuro che sia necessario, ma se l'uso di un clone non rimuove automaticamente l'elemento dall'elenco, è quindi possibile utilizzare l'evento remove per eliminare completamente l'elemento che è stato trascinato fuori dal DOM.

+2

Quindi, questo è quello che * ho pensato * dovrebbe accadere con "clone" - ma quando ho impostato l'helper: "clonare" l'originale è ancora scomparso. Quindi forse dovrei chiedere: cosa potrei mancare? – brahn

+0

Guardando più attentamente, con 'clone' l'oggetto appare ancora nel DOM. Ma non è visualizzato. Ho modificato l'esempio fornito con il pacchetto jquery-ui per utilizzare l'opzione 'helper: 'clone'', puoi vederlo qui: http://brahn.sqprod.com/jq/sortable-example.html – brahn

+0

E, in effetti (grazie a Firebug) è ora chiaro che (di nuovo, anche con l'opzione 'clone') l'originale è nascosto impostando lo stile a' display: none' – brahn