it-swarm-eu.dev

Wie ordne ich Zeilen in einem Raster manuell neu an?

Ich möchte, dass meine Benutzer Elemente in einem Raster neu anordnen - nicht automatisch nach einer Spalte sortieren. Sie wählen aus, welches Element das erste ist, welches nach dem anderen kommt usw.

Ich dachte an einige Lösungen und sah sie, die je nach Fall funktionieren könnten:

  • Drag & Drop: sexy, funktioniert aber nicht für lange Raster mit Scrollen oder Paging. Ein weiterer Nachteil ist, dass es unsichtbar ist. Möglicherweise wissen Sie nicht einmal, dass diese Funktionalität verfügbar ist. Schließlich ist etwas Geschicklichkeit erforderlich. Es kann jedoch verwendet werden, um mehrere Elemente gleichzeitig zu verschieben.
  • Aufwärts-/Abwärtspfeile: verständlich und einfach für kleine Bewegungen zu verwenden, aber langweilig, wenn Sie das letzte Element an erster Stelle verschieben müssen. Auch wenn Sie ein Element um einige Schritte verschieben, müssen Sie diesen Pfeil nach jeder einzelnen Bewegung abfangen. Funktioniert jeweils nur für ein Element.
  • Eine Indexspalte: Der Benutzer gibt eine Zahl ein, die die Position des Elements angibt. Nützlich, wenn der Benutzer die gewünschte absolute Position kennt. Es ist schwer zu erraten, was passieren wird, wenn eine bereits vorhandene Nummer eingegeben wird. Funktioniert jeweils nur für ein Element.

Ich bin versucht, zwei dieser Techniken wie die Indexspalte + Drag & Drop zu kombinieren, aber ich habe Angst, die Nachteile beider zu kumulieren, anstatt die Vorteile beider zu nutzen.

Welche Neuordnungstechniken haben sich bewährt?

5
Mart

Netflix kombiniert drei Methoden in seiner Warteschlange. Sie können eine bestimmte Zeilennummer ziehen und ablegen, aber auch angeben oder klicken, um sie ganz nach oben zu verschieben:

alt text

Was ich an ihrem Ansatz interessant finde, ist, dass sie das "Top" -Symbol (grün eingekreist) genau dort in jeder Zeile platziert haben, anstatt dass der Benutzer eine Auswahl treffen und dann irgendwo oben auf der Seite klicken muss, wo Die meisten Web-Apps setzen solche Symbole oder Schaltflächen.

In Ihrem Fall würde ich Drag & Drop verwenden, aber in jede Zeile ein Zahnradsymbol einfügen:

alt text

Dies würde mehrere Aktionen ermöglichen:

  • Der Benutzer kann eine oder mehrere Zeilen per Drag & Drop verschieben

  • Der Benutzer kann mehrere Zeilen auswählen und dann auf das Zahnradsymbol klicken, um ein Dropdown-Menü aufzurufen und eine beliebige Anzahl von Dingen auszuführen, z. Verschieben Sie die Auswahl nach oben oder unten, verschieben Sie die Auswahl um eine bestimmte Anzahl von Zeilen nach oben oder unten (in diesem Fall wird ein winziger Dialog angezeigt), kopieren, schneiden usw. Praktisch unbegrenzt.

7
Hisham

Das erste, was Sie sich fragen müssen, bevor Sie herausfinden möchten, wie es geht, ist, wie oft Benutzer es tun werden.

Wenn es häufig verwendet wird, würde ich versuchen, es so zu erstellen, dass Sie es per Drag & Drop verwenden und einfach automatisch durch die Seite scrollen, sobald ein Benutzer einen bestimmten Schwellenwert erreicht.

Es ist eine gute Faustregel zu sagen, wenn ein Benutzer ziemlich oft etwas tun muss und Sie es einfacher machen können, selbst wenn Sie eine exotische Art von Interaktion einführen, tun Sie es. Der Benutzer ist mit der Lernkurve einverstanden, da sie später davon profitieren wird.

Wenn es nicht oft verwendet wird, würde ich einen Aufwärts-/Abwärtspfeil ausführen, es wird möglicherweise nicht beendet, aber es ist klar.

3
ThomPete

Ich würde Aufwärts-/Abwärtspfeile mit Drag'n'Drop kombinieren.

Es ist einfach umständlich, eine Zahl erraten oder vorher herausfinden zu müssen. Und obwohl Kollisionen im Code behandelt werden können und sollten, beispielsweise durch einfaches Inkrementieren aller Zahlen, die auf oder über der eingegebenen Zahl liegen, werden die meisten Benutzer versuchen, die richtige im Voraus zu ermitteln, wenn auch nur aus Unsicherheit darüber, wie ein Duplikat oder falsche Nummer wird behandelt.

Die Aufwärts- und Abwärtspfeile sind eine viel bequemere Möglichkeit, über kurze Entfernungen neu zu ordnen.

Für größere Entfernungen und für mehrere Objektbewegungen kann Drag'n'Drop hinzugefügt werden. Um die Verwendbarkeit von Drag'n'Drop über Entfernungen von mehr als einer Seite sicherzustellen, sollte auch das automatische Scrollen des Rasters implementiert werden. Dies bedeutet, dass während eines Ziehvorgangs das Raster automatisch gescrollt wird, wenn Sie die Maus innerhalb eines bestimmten Randes des oberen oder unteren Randes des Rasters ziehen. Genau das macht der Windows Explorer.

Um dies noch weiter zu verbessern, kann die Bildlaufgeschwindigkeit langsam beginnen und zunehmen, wenn sich der Luftwiderstand weiterhin im Bereich "Bildlaufempfindlich" befindet. Seien Sie jedoch vorsichtig und stellen Sie eine maximale Bildlaufgeschwindigkeit ein: Ich wurde durch automatisches Scrollen, das so schnell und/oder so schnell beschleunigte, dass ich immer weit über die Stelle gescrollt habe, an der ich sein musste, in Wut versetzt.

0
Marjan Venema

Das Drupal CMS hat hierfür eine relativ gute Lösung, die auf Listen mit 30-50 Elementen skaliert werden kann. Sie sind sich nicht sicher, wie es höher skaliert werden soll.

Das Konfigurieren von Site- "Blöcken" ist ein Beispiel - siehe Screenshot unten.

  • Jedes Element verfügt über einen 4-Wege-Griff , der für Drag & Drop-Vorgänge verwendet werden kann.
    Der Griff bietet einen visuellen "Vorteil", dass der Gegenstand gezogen werden kann.
  • Die Liste ist in Abschnitte unterteilt.
    Das Verschieben eines Elements in einen bestimmten Abschnitt kann durch Auswahl in der für dieses Element angezeigten Combobox erfolgen

alt text

Der "Drag & Drop" -Ansatz ist viel flüssiger als Pfeile, mit denen Elemente einen Schritt verschoben werden. JIRA macht das und es ist wirklich mühsam, Dinge an den richtigen Ort zu bringen.

0
Bevan

Dies hängt davon ab, wie Ihre Benutzer das System verwenden:

  • Wenn die Zeilennummer aussagekräftig ist (z. B. Position in der Warteschlange), möchten Sie sie wahrscheinlich anzeigen und bearbeiten.

  • Wenn "Dies zuerst machen" eine häufige Aktion ist, möchten Sie möglicherweise eine Schaltfläche "Nach oben verschieben" (oder nach unten verschieben) einführen.

  • Wenn Ihre Benutzer Tastaturkürzel mögen, die Tastenkombinationen nach oben und unten hinzufügen, stellen Sie sicher, dass Auswahl/Fokus der Zeile folgt, wenn sie sich bewegt. Wenn Sie die Tastenkombination dreimal drücken, wird die Zeile tatsächlich um 3 Stellen nach oben verschoben.

  • Sie können Auf-/Ab-Schaltflächen hinzufügen, meine Benutzer mögen diese nicht sehr (Ihre Benutzer können unterschiedlich sein)

  • Und schließlich Drag & Drop, die bevorzugte Methode meiner Benutzer zum Neuordnen von Zeilen - in meiner App gibt es keine Drag-Handles und Benutzer können Drag & Drop problemlos ausführen (Ihre Benutzer können unterschiedlich sein).

Und was auch immer Sie tun, stellen Sie sicher, dass Sie es an Ihren spezifischen Benutzern testen und sehen, wie sie es mögen.

0
Nir