it-swarm.it

Come posso rendere trascinabile una riga di tabella su una pagina Web?

Ho una tabella su una pagina Web in cui devo consentire all'utente di riordinare le righe. Stavo pensando di lasciare che l'utente trascinasse le righe per riordinarle. Ma come faccio a far sapere all'utente che potrebbe farlo? Devo creare una cella vuota come la prima colonna con punti o linee verticali come ha Gmail per ogni e-mail nella posta in arrivo? Dove posso ottenere un'immagine del genere? Uso un'icona "mano che afferra" per il cursore o un cursore "sposta"? Visualizzo il cursore mentre si posiziona il puntatore sopra il tavolo o semplicemente "l'area di acquisizione"? Consentire all'utente di trascinare qualsiasi parte della riga da trascinare?

12
Adam

37signals ' Basecamp fa un ottimo lavoro con questo:

Basecamp's drag indicator

Passando il mouse sopra un oggetto, i controlli vengono visualizzati a sinistra dell'elemento. Uno dei controlli è una freccia su/giù. Passando il mouse sopra quel controllo, il cursore del mouse si trasforma in un cursore di spostamento. Tenendo premuto il pulsante del mouse si sposta la posizione dell'elemento afferrato sull'asse verticale corrispondente alla posizione del mouse. Rilasciando il pulsante del mouse si rilascia l'oggetto nella posizione accettabile più vicina. La posizione dell'elemento trascinato viene costantemente aggiornata sullo schermo in modo da sapere dove si trova.

Gmail tasks drag indicator

La funzione Attività di Gmail lo gestisce in modo leggermente diverso mostrando una superficie di trascinamento a sinistra quando si passa il mouse sopra un elemento. Passando il mouse sopra la superficie di trascinamento, il cursore si trasforma in un'icona a forma di mano (non un'icona a forma di mano, che è una mano chiusa). Ulteriore comportamento è identico a Basecamp.

Per ulteriori informazioni su questo modello, consulta la Libreria dei modelli di Yahoo Design e fai riferimento a griglia dello storyboard dei momenti interessanti .

22
Rahul

Finché il layout non è sovraffollato, la moltiplicazione dei suggerimenti aiuta gli utenti a capire quali funzionalità sono disponibili.

Oltre alle maniglie di trascinamento, potresti quindi aggiungere una didascalia "Trascina righe per riordinare" nella parte superiore della tabella.

0
Pierre