Qual è il modo migliore per gestire l'ordinamento degli elementi dell'elenco con l'interfaccia utente Drag & Drop?

10

Ho un elenco di studenti che dovrei visualizzare all'utente su una pagina Web in formato tabulare.
Gli articoli sono memorizzati nel DB insieme alle informazioni di SortOrder.

Sulla pagina Web, l'utente può riorganizzare l'ordine degli elenchi trascinando gli elementi nell'ordinamento desiderato, in modo simile a questo post .

Di seguito è riportato uno screenshot della mia pagina di test.
inserisci qui la descrizione dell'immagine

Nell'esempio precedente, a ogni riga sono associate informazioni sull'ordinamento. Quando lancio John Doe (ID studente 10) sopra la riga ID studente 1, l'ordine dell'elenco ora dovrebbe essere: 2, 10, 1, 8, 11.

Qual è il modo ottimista (meno affamato di risorse) per archiviare e aggiornare le informazioni sull'ordinamento?

La mia unica idea per ora è, per ogni cambiamento nell'ordinamento della lista, il valore SortOrder di ogni oggetto dovrebbe essere aggiornato, che secondo me ha molta fame di risorse.

Cordiali saluti: potrei avere al massimo 25 righe nella mia tabella.

c# sorting

— Alessandro
fonte

1

Devi avere questo ordinamento persistente sul lato server o è sufficiente sul lato client?

— deterb

1

Dovrei archiviare l'ordine sul lato server. Non importa se l'ordine viene archiviato su ogni trascinamento o facendo clic su un pulsante una volta per tutte.

— Alexander,

10

Ho pensato a qualcosa che può ridurre le tue domande. Qui nel mio esempio, ho aggiunto un nuovo columnper l'ordinamento denominato pos. Quindi, inizialmente senza trascinare il tuo tavolo sarà come -

Stato iniziale

Ora, consideriamo che hai trascinato Item 4tra Item 1e Item 2. Ora, la nuova posrapporto Item 4sarà (20 + 10) / 2, che è 15. Quindi, dovrai solo aggiornare una singola riga nel database. E otterrai:

Dopo il trascinamento

Ecco un diagramma di flusso con i casi limite. iè il nuovo indice dell'array della riga dopo averlo trascinato -

Diagramma di flusso

Questo diagramma di flusso non gestisce i ArrayOutOfBoundcontrolli. E, per i casi limite, avrai bisogno di più di una query.

Dato che hai solo 25 righe, puoi prendere un valore molto grande (es. 10,000) Per la differenza pos (ho preso 10per questo esempio). Maggiore è il valore, meno si scontrerà.

— Rifat
fonte

Questo è un approccio simpatico. Nota che dovrai ricalcolare l'intero (o gran parte) delle informazioni sull'ordinazione se non c'è spazio per non inserire un articolo. Sarebbe un evento abbastanza raro da sopportare.

— 9000

@ 9000 è possibile utilizzare il numero decimale anziché intero per evitare il problema.

— Rifat,

se avete Item Acon la posizione 123 e Item Ccon la posizione 124, non c'è modo semplice per mettere Item B tra loro. Una soluzione sarebbe usare numeri frazionari (ad es. Float), ma hanno anche una precisione limitata. A volte è meglio fare una rinumerazione, normalizzare gli intervalli e mantenere le cose semplici.

— 9000,

Quindi quando lo fai, sottrai solo da 1. Non c'è un intervallo diverso da cui potresti sottrarre per prevenire eventuali collisioni?

— muttley91,

@Rifat anche i decimali hanno una precisione limitata, quindi si scontreranno anche loro.

— SCI

3

Personalmente restituirei un array JSON per i dati dal back-end. Quindi userei JavaScript (JQuery o knockout) per visualizzare e ordinare e riordinare i dati. In questo modo l'ordinamento non ha carico sul server.

— Tom Squires
fonte

0

Stai cercando un modo intuitivo per gestire questa situazione, ma anche una prospettiva intuitiva è un must. Raccomando richieste individuali dopo ogni articolo riordinato. Ogni chiamata consente di verificare se accettata o non riuscita.

Le risposte non riuscite ripristinano la vista e visualizzano un messaggio per l'utente finale.
Le richieste accettate semplici consentono la modifica continua.

In alternativa, l'uso di un oggetto JSON (@ tom-squires) è una buona idea per ridurre il sovraccarico HTTP e l'elaborazione lato server, ma alla fine richiede più codice per gestire le richieste sul lato server e client. Se va bene, passare l'oggetto al server è tecnicamente più efficiente. Permette anche un ritardo di un paio di secondi per consentire più riordini prima di una singola richiesta, se lo desideri.

Tieni presente che, per fornire a un utente un feedback da richieste non riuscite, devi analizzare un oggetto JSON di risposta dal server per capire quale elemento non è riuscito e reimpostare l'interfaccia utente in base a quello.

— David Garza
fonte

-1

Qualcosa del genere nel gestore dell'evento drop, dove e è l'evento DnD.

        ....
        if (e.Action == DragAction.Drop)
        {
            foreach(var item in Items)
            {
                if (e.NewIndex == e.OldIndex) // Dropped in same place
                    return;
                if(e.OldIndex > e.NewIndex) // Moved Up
                {
                    if (item.SortOrder >= e.NewIndex && item.SortOrder < e.OldIndex)
                    {
                        item.SortOrder ++;
                    }
                }
                else // Moved Down
                {
                    if (item.SortOrder> e.OldIndex && item.SortOrder < e.NewIndex) 
                    {
                        item.SortOrder --;
                    }
                }   
            }
            ((Student)e.ItemData).SortOrder = e.NewIndex;
        }
    ...

— Entra
fonte