web-development-kb-eu.site

Was sind die gängigen Redewendungen für den Drop-Teil einer Drag & Drop-Operation?

Ich beschäftige mich hier nur mit der anderen Hälfte einer D% D-Operation, dem Abfall. Was sind die gängigen Redewendungen, um einem Benutzer mitzuteilen, den er löschen kann? Und welche sind die "besten" und in welchen Situationen?

Insbesondere möchte ich diejenigen kennen, die dem Benutzer sowohl vor als auch nach dem Ziehen etwas mitteilen. Diese können visuell oder "taktil" sein (Mauszeiger ändert sich).

drag-n-dropidioms
12
shemnon
  • Geben Sie mögliche Drop-Ziele an
  • Zeigen Sie eine Live-Vorschau der Ergebnisse
  • Zeigen Sie in Echtzeit, was gezogen wird

alt text

  • Wenn Sie irgendwo nichts ablegen können, erklären Sie den Benutzern in einem Popup neben dem Cursor, warum:

alt text

  • Halte deine Drop-Ziele groß! Drag & Drop ist bereits eine ungeheure Verletzung von Fritz 'Gesetz; keine Notwendigkeit, es noch schlimmer zu machen.
5
Robert Fraser

Ich habe Apps gesehen, die einen Umriss zeigen, wo Sie ablegen können.

Dies ist von der Widget-Seite wordpress Widget)

(Wordpress widget page
(Quelle: srulytaber.com )

10
Sruly

Ein üblicher Ansatz besteht darin, den Cursor in einen Cursor zu verwandeln, der nicht fallen gelassen werden kann, wenn Sie über alles andere hinweg sind.

Die Logik wäre:

  1. Starten Sie Drag.
  2. Drehen Sie den Cursor auf "Kann nicht fallen".
  3. Überprüfen Sie beim Ziehen, ob über etwas, das den Tropfen aufnehmen kann, den Cursor in "Kann fallen lassen".
  4. Cursor fallen lassen und zurücksetzen.

HINWEIS: Ich befürworte dies nicht unbedingt, aber es zeigt dem Benutzer, dass er sich mitten in einem Drag & Drop-Vorgang befindet, und zeigt an, wo der Drop gültig ist.

7
ChrisF

Sie können die Ablageorte leicht markieren, sobald der Benutzer ein Element zieht. Auf diese Weise können Sie die Aufmerksamkeit auf die Ablageorte lenken.

Voraussetzung dafür ist natürlich, dass Sie zeigen, was überhaupt schleppbar ist. Dort diese Fragen mit Antwort dafür.

5
Gamlor

Manchmal befindet sich das Ablageziel innerhalb einer Menge von linear angeordneten Objekten. Nachdem das Objekt abgelegt wurde, werden Objekte, die dem Ablageziel folgen, verschoben, um Platz für das neue Objekt zu schaffen. In diesem Fall ist die Einfügemarke wird normalerweise durch eine dünne Linie angezeigt zwischen den beiden Objekten, die getrennt werden, um Platz zu schaffen.

In fast jeder GUI, die eine Maus verwendet, kann beispielsweise Text ausgewählt und von einem Teil eines Dokuments in einen anderen gezogen werden. Die Einfügemarke wird durch eine dünne Linie zwischen zwei Zeichen angezeigt.

Dies ist auch bei der zuvor besprochenen Netflix-Warteschlange der Fall. Zusätzlich zu einer dünnen Linie verwendet Netflix einen schwarzen Pfeil, um anzuzeigen, wohin der Film gehen soll.

 Thundercats: Season 1: Vol. 1: Disc 3     
 .....................................     
 Thundercats: Season 1: Vol. 1: Disc 4
>------------------------------------- 
 Thundercats: Season 1: Vol. 1: Disc 5
 .....................................
 Thundercats: Season 1: Vol. 1: Disc 6

(Ich kann nicht herausfinden, wie man beim Ziehen einen Screenshot macht.)

3
Patrick McElhaney

Ein typischer Workflow zum Löschen ist:

repeat while mouse is down

    dragEnter -> mouse pointer has moved into some new area.
                 Highlight the area if the dragged data is valid for dropping into it,
                 adjust cursor (forbidden, copy, symlink, or move)
                 adjust the drag image (e.g. when dragging from icon view in file picker
                 to list view in another file picker, now's the time to animate the
                 drag image to look like the list view items would when dropped.

    dragLeave -> Undo any previous highlight.

end repeat

if we were over a valid drop location
    drop
else
    show an animation of the drag image snapping back to its
         point of Origin to make it clear the drag was canceled.
end if

Undo any previous highlight.

Typische Arten von Drop-Highlights sind:

  • Umreißen Sie einen Container (z. B. eine Bildlaufansicht), um anzuzeigen, dass etwas ein gültiges Ablageziel ist
  • Einfügemarkierungen geben an, welche Listenelemente oder Textzeichen zwischen oder nach dem Element abgelegt werden
  • Ausgewählte Varianten eines Symbols (oder "aufgeklappte" Variante, z. B. eines Ordnersymbols), um einen Tropfen anzuzeigen, werden innerhalb eines Elements enden, nicht davor oder danach.

Beachten Sie, dass Einfügemarken nicht nur für Listen nützlich sind, in denen Sie die Artikelreihenfolge frei anordnen können, sondern auch für sortierte Listen, in denen z. Ein Ablegen zwischen oder auf zwei Dateien in einer sortierten Liste ist vollkommen gültig. Sie möchten jedoch angeben, dass die Datei nach dem Sortieren weiter unten angezeigt wird.

Der Vollständigkeit halber lautet der typische Arbeitsablauf für das Ziehen:

detect whether a click-and-hold or click-and-move is really intended to be a drag:
 - Is it obvious? (e.g. dragging a file by its icon -- there is nothing else you can do
 - Or: Wait for a while, has the mouse moved by at least 4 pixels in some direction
       and has the mouse still not been released? (Accounts for most peoples' less-than-pefect motor skills
 - Or: Is the drag in a certain direction that doesn't make sense for anything else?
       (E.g. dragging sideways over text may be an attempt at a new selection,
       OTOH a vertical drag > 4px on a selection is pretty guaranteed to be a drag attempt.

Set up a drag image that is attached to the mouse. This image usually looks exactly
    like a 70% opaque version of the selection (giving the illusion you're moving
    the selection) and if you haven't moved the mouse yet, should invisibly overlay
    the actual selection. (I.e. move it relative to the mouse, don't center it
    under the mouse)

Start the drag! (following this we do the workflow for dropping)

(Zumindest geschieht dies in modernen Mac OS X-Apps normalerweise so, obwohl das Aktualisieren des Drag-Images während eines Ablegens eine ziemlich neue Sache ist.)

2
uliwitness