2012-03-21 13 views
12

Ho cercato STACKOVERFLOW e altri forum per la soluzione al mio problema - se ho perso una soluzione di lavoro per favore indicami verso di esso.Jquery UI ordinabile - eseguire l'azione PRIMA di avviare l'evento si accende

Il mio problema: Ogni volta che trascino un elemento (un div del portlet) nella mia lista ordinabile, ho bisogno di eseguire qualche azione PRIMA che il vero processo di trascinamento abbia inizio (da quanto ho capito prima che l'evento START sia attivato).

Per essere più specifici: I miei DIV forniscono all'utente la possibilità di estendere/comprimere il suo corpo (come nell'esempio riportato alla pagina dell'interfaccia utente jquery http://jqueryui.com/demos/sortable/#portlets).

Ogni volta che si trascina un elemento, mi piacerebbe attivare il metodo di compressione in modo che l'unico elemento visivo trascinato sia il DIV compresso.

Tuttavia ogni volta che io chiamo il mio metodo (qualcosa di simile)

$someitem.trigger("toggle.somenamespace") 

funziona come previsto, tranne che l'altezza della aiutante trascinato viene calcolato prima che l'evento di inizio viene sparato nel ordinabili e quindi l'aiuto ha l'altezza dell'elemento originale nel suo stato non-collassato.

Il mio pensiero originale su questo era: come l'ordinabile ha per es. la possibilità di misurare una distanza di trascinamento prima dell'avvio della vera procedura di trascinamento (con l'opzione: distanza) dovrebbe essere possibile agganciare questo flusso, ad esempio memorizzare la funzione originale startDrag (o come si chiama) dell'ordinabile widget in una variabile temporanea, sostituirla con una richiamata personalizzata che attiva prima la funzionalità di compressione e quindi chiama la funzione originale per garantire che l'altezza sia calcolata correttamente.

Si noti che l'impostazione delle proprietà CSS nei gestori per il trascinamento o su un evento di ordinabile non ha l'effetto desiderato, come l'altezza il il widget ordinabile calcolato per l'helper è impostato come proprietà dell'elemento.

Oppure - probabilmente qualcuno conosce un modo migliore per influenzare l'altezza dell'helper visualizzato durante il processo di trascinamento, è solo la mia opinione che il mio approccio originale (cambiare l'elemento prima del processo di trascinamento e quindi lasciare che il widget faccia i suoi calcoli il modo in cui era intented) sarebbe una soluzione migliore ...

grazie per qualsiasi tipo di assistenza, Matthias

EDIT: impostare la bandiera ordinabile: forceHelperSize alla vera e impostando l'ui.item/helper la dimensione all'inizio draghandler non funziona, poiché produce visivamente l'effetto desiderato (viene trascinato solo l'elemento compresso, ma impedisce all'elemento di essere trascinato fino in fondo (come se l'elemento avrebbe ancora l'altezza nel suo stato non collassato) testato con un helper: 'originale' e 'clone'

risposta

13

Ho cercato un elemento molto tempo per questa "soluzione":

$('.handle').each(function() { 
    $(this).mousedown(function() { 
     $(this).parent().parent().children('ol').hide('blind', 500); 
    }); 
}); 

È possibile attivare un evento dal mousedowning la maniglia e nascondere quello che vuoi. Quindi imposta il ritardo dell'opzione di ordinabile su un valore maggiore della durata dell'animazione nascosta, nel mio esempio 501.

Non è una soluzione elegante, ma funziona, almeno nel mio programma.

+0

Piuttosto che fare una ciascuno, sarebbe meglio per selezionare '.handle' nel MouseDown e quindi utilizzare $ (questo) all'interno della funzione mouse che dovrebbe fare riferimento all'elemento corretto? –

+0

Si dovrebbe anche verificare per mousemove. Mousedown potrebbe significare un normale clic. – Blaise

10

È possibile farlo, ma non è a prova di futuro per le prossime versioni di jQuery UI:

var oldMouseStart = $.ui.sortable.prototype._mouseStart; 
$.ui.sortable.prototype._mouseStart = function(event, overrideHandle, noActivation) { 
    this._trigger("CustomBeforeStart", event, this._uiHash()); 
    oldMouseStart.apply(this, [event, overrideHandle, noActivation]); 
}; 

You can then use the new event when setting up the sortable: 

$(".whatever").sortable({ 
    "CustomBeforeStart":function(e, ui) { 
    } 
    ... 
}); 
Problemi correlati