it-swarm-eu.dev

Wie mache ich eine Tabellenzeile auf einer Webseite ziehbar?

Ich habe eine Tabelle auf einer Webseite, in der der Benutzer die Zeilen neu anordnen muss. Ich dachte daran, den Benutzer die Zeilen ziehen zu lassen, um sie neu zu ordnen. Aber wie würde ich den Benutzer wissen lassen, dass er das tun könnte? Sollte ich eine leere Zelle als erste Spalte mit Punkten oder vertikalen Linien erstellen, wie dies bei Google Mail für jede E-Mail im Posteingang der Fall ist? Wo kann ich so ein Bild bekommen? Benutze ich ein "Greifhand" -Symbol für den Cursor oder einen "Bewegungs" -Cursor? Zeige ich den Cursor, während ich über der Tabelle schwebe, oder nur den "Greifbereich"? Lasse ich den Benutzer einen Teil der Zeile zum Ziehen greifen?

12
Adam

37signals ' Basecamp macht einen tollen Job damit:

Basecamp's drag indicator

Wenn Sie den Mauszeiger über ein Element bewegen, werden links neben dem Element Steuerelemente angezeigt. Eine der Steuerelemente ist ein Aufwärts-/Abwärtspfeil. Wenn Sie den Mauszeiger über dieses Steuerelement bewegen, verwandelt sich der Mauszeiger in einen Bewegungscursor. Wenn Sie die Maustaste gedrückt halten, wird die Position des ergriffenen Elements auf der vertikalen Achse entsprechend der Position der Maus verschoben. Durch Loslassen der Maustaste wird das Objekt an die nächstgelegene akzeptable Position gebracht. Die Position des zu ziehenden Elements wird auf dem Bildschirm ständig aktualisiert, damit Sie wissen, wo es sich befindet.

Gmail tasks drag indicator

Die Aufgabenfunktion von Google Mail behandelt dies etwas anders, indem beim Ziehen mit der Maus über ein Element links eine Ziehfläche angezeigt wird. Wenn Sie den Mauszeiger über die Ziehfläche bewegen, wird der Cursor in ein Handsymbol umgewandelt (kein Greifsymbol, bei dem es sich um eine geschlossene Hand handelt). Weiteres Verhalten ist identisch mit Basecamp.

Weitere Informationen zu diesem Muster finden Sie in der Yahoo Design Pattern Library. Weitere Informationen finden Sie im Storyboard-Raster für interessante Momente .

22
Rahul

Solange Ihr Layout nicht überfüllt ist, können Benutzer durch Multiplizieren der Hinweise herausfinden, welche Funktionen verfügbar sind.

Zusätzlich zu den Ziehpunkten möchten Sie daher möglicherweise eine Beschriftung "Zeilen neu anordnen" am oberen Rand Ihrer Tabelle hinzufügen.

0
Pierre