it-swarm-eu.dev

Jak mohu udělat řádek tabulky na webové stránce tak, aby vypadal vykreslitelně?

Na webové stránce mám tabulku, kde musím nechat uživatele, aby řádky uspořádal. Přemýšlel jsem o tom, abych nechal uživatele přetáhnout řádky a uspořádat je. Ale jak bych mohl dát uživateli vědět, že by to mohl udělat? Mám jako první sloupec vytvořit prázdnou buňku s tečkami nebo svislými čarami, jako má gmail, pro každý e-mail ve složce Doručená pošta? Kde mohu získat takový obrázek? Používám pro kurzor ikonu „popadnutí ruky“ nebo „pohyb“ kurzor? Zobrazuji kurzor, když se vznáší nad stolem nebo jen „uchopovací oblast“? Nechám uživatele uchopit jakoukoli část řádku za přetažení?

12
Adam

37signals ' Basecamp s tím odvádí skvělou práci:

Basecamp's drag indicator

Když umístíte kurzor na položku, zobrazí se ovládací prvky vlevo od položky. Jedním z ovládacích prvků je šipka nahoru/dolů. Když umístíte kurzor na tento ovládací prvek, kurzor myši se změní na pohybový kurzor. Podržením tlačítka myši se posouvá pozice popadnuté položky na svislé ose odpovídající poloze myši. Uvolněním tlačítka myši se položka umístí na nejbližší přijatelnou pozici. Pozice přetahované položky je neustále aktualizována na obrazovce, takže víte, kde je.

Gmail tasks drag indicator

Funkce Úkoly Gmailu to zvládne trochu jinak tím, že při umístění kurzoru na položku ukazuje přetahovací plochu vlevo. Umístěním kurzoru na povrch přetažení se změní kurzor na ikonu ruky (nikoli ikonu popadnutí, což je uzavřená ruka). Další chování je totožné s Basecampem.

Další informace o tomto vzoru naleznete v knihovně vzorů Yahoo Design Pattern a odkazujte na mřížka storyboardu zajímavých momentů .

22
Rahul

Dokud vaše rozvržení není přeplněné, vynásobení rad pomůže uživatelům zjistit, jaké funkce jsou k dispozici.

Kromě táhel tažení byste proto mohli chtít přidat horní část tabulky také titulek „Přetáhnout řádky pro změnu pořadí“.

0
Pierre