Aggiorna DOM mentre trascina un oggetto ordinabile

Question

Ho elenco di elementi che dovrebbero essere ordinabili, che di per sé non è difficile da implementare usando jQuery. Basato su Questo codice ho messo questa funzionalità in una direttiva angolare, in modo che il mio modello sia tenuto aggiornato quando si riordina gli elementi nell'elenco.

Il mio elenco ha diversi colori di riga a seconda che sia una riga pari o dispari, oltre a due simboli che cambiano colore a seconda se l'elemento è il primo o l'ultimazione nell'elenco. Ho creato un violino per mostrare un esempio .

Ora, il problema è che trascinando un oggetto incasinare il layout e i simboli colorati non vengono aggiornati durante il trascinamento di un elemento. Quando viene rilasciato un oggetto, l'elenco viene aggiornato e sembra ancora una volta.

La mia domanda: come consentono l'elenco aggiornato durante lo spostamento di un oggetto? Ho provato con una funzione di callback change, ma non ho idea di come ottenere quale posizione la mia voce di trascinamento è attualmente occupata. L'oggetto ui non contiene informazioni su questo, per quanto ne so. Quando si aggiorna il modello, l'idea è che il DOM aggiornerà anche. Questo farebbe quindi ripristinare il mio trascinamento?

Ho anche provato a creare un contenitore per il testo, in modo che lo sfondo non venga trascinato con l'elemento (questo ancora non risolve il problema con l'aggiornamento dei simboli colorati), ma non è stato possibile effettuare la funzione come richiesto. .

Spero che tu sia in grado di aiutare.

Modifica: Dopo un buon sonno notturno mi sono svegliato e trovato ui.placeholder.index() nell'evento change, ottiene la posizione corrente dell'articolo trascinato. Usando questo posso aggiornare il modello, ma lo styling è ancora un pasticcio durante il trascinamento.

Cordiali saluti

Answer 1

Se qualcuno è interessato, ho finito con un hack. Quello che ho fatto è creare prima lo sfondo e successivamente aggiungere gli elementi all'elenco.In questo modo lo sfondo non cambierà mentre trascini il mio elemento.

Informazioni sull'aggiornamento del mio modello Ho avuto un problema con l'evento change che viene chiamato due volte, quindi sono andato via da quell'idea.

Questo violino aggiornato mostra la mia soluzione.