it-swarm.asia

Apa idiom umum untuk bagian drop dari operasi drag and drop?

Saya hanya khawatir di sini dengan setengah dari operasi D% D, drop. Apa idiom umum untuk berkomunikasi dengan pengguna yang bisa mereka jatuhkan? Dan mana yang "terbaik" dan dalam situasi apa?

Secara khusus saya ingin tahu yang mengkomunikasikan sesuatu kepada pengguna baik sebelum drag terjadi dan setelah drag terjadi. Ini bisa berupa visual atau 'sentuhan' (perubahan kursor mouse).

12
shemnon
  • Tunjukkan kemungkinan target penurunan
  • Tampilkan pratinjau langsung hasil
  • Tampilkan apa yang diseret secara real-time

alt text

  • Jika Anda tidak dapat menjatuhkan sesuatu di suatu tempat, jelaskan mengapa kepada pengguna di sembulan dekat kursor:

alt text

  • Pertahankan target drop Anda tetap besar! Seret dan lepas sudah merupakan pelanggaran mengerikan terhadap hukum Fritz; tidak perlu membuatnya lebih buruk.
5
Robert Fraser

Saya telah melihat aplikasi yang menunjukkan garis besar tempat Anda dapat menjatuhkan.

Ini dari halaman widget wordpress

Wordpress widget page
(sumber: srulytaber.com )

10
Sruly

Pendekatan yang umum adalah mengubah kursor menjadi kursor "tidak dapat jatuh" ketika Anda mengatasi semua yang lainnya.

Logikanya adalah:

  1. Mulai Seret.
  2. Ubah kursor menjadi "tidak bisa jatuh".
  3. Sambil menyeret periksa apakah ada sesuatu yang bisa menerima drop lalu ubah kursor menjadi "bisa drop".
  4. Jatuhkan & setel ulang kursor.

CATATAN: Saya tidak perlu menganjurkan ini, tetapi itu menunjukkan kepada pengguna bahwa mereka berada di tengah-tengah operasi seret/jatuhkan serta menunjukkan di mana setetes itu valid.

7
ChrisF

Anda dapat sedikit menyoroti lokasi drop segera setelah pengguna menyeret item. Dengan cara ini Anda dapat menarik perhatian ke lokasi drop.

Prasyarat untuk ini tentu saja adalah bahwa Anda menunjukkan apa yang dapat diseret di tempat pertama. Ada pertanyaan ini dengan jawaban ntuk itu.

5
Gamlor

Terkadang target drop berada dalam set objek diatur secara linear. Setelah item dijatuhkan, objek yang mengikuti target jatuh akan bergerak untuk memberi ruang bagi objek baru. Dalam kasus itu, titik penyisipan biasanya ditunjukkan oleh garis tipis antara dua objek yang akan terpisah untuk membuat ruang.

Misalnya, di hampir semua GUI yang menggunakan mouse, teks dapat dipilih dan diseret dari satu bagian dokumen ke yang lain. Titik penyisipan ditunjukkan oleh garis tipis antara dua karakter.

Itu juga halnya dengan antrian Netflix yang dibahas sebelumnya. Selain garis tipis, Netflix menggunakan panah hitam untuk menunjukkan ke mana film akan pergi.

 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

(Saya tidak tahu cara mengambil tangkapan layar saat menyeret.)

3

Alur kerja umum untuk menjatuhkan adalah:

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.

Jenis-jenis sorotan drop yang umum adalah:

  • Garis besar di sekitar wadah (mis. Tampilan gulir) untuk menunjukkan bahwa sesuatu adalah target drop yang valid
  • Tanda penyisipan untuk menunjukkan item daftar atau karakter teks mana item akan dijatuhkan di antara, atau setelah
  • Varian ikon yang dipilih (atau varian "folded open" dari mis. Ikon folder) untuk menunjukkan bahwa drop akan berakhir di dalam item, bukan sebelum atau sesudahnya.

Perhatikan bahwa tanda penyisipan tidak hanya berguna untuk daftar tempat Anda dapat dengan bebas mengatur ulang pesanan barang, tetapi juga untuk daftar yang diurutkan, di mana mis. setetes antara atau pada dua file dalam daftar yang diurutkan benar-benar valid, tetapi Anda ingin menunjukkan bahwa, setelah pengurutan, file akan ditampilkan lebih jauh ke bawah.

Demi kelengkapan saja, alur kerja khas untuk menyeret adalah:

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)

(Setidaknya ini adalah bagaimana drag'n drop biasanya terjadi di aplikasi Mac OS X modern, meskipun memperbarui gambar drag selama drop adalah hal yang cukup baru)

2
uliwitness