it-swarm.asia

Di kotak, bagaimana cara menyusun ulang baris secara manual?

Saya ingin pengguna saya memesan kembali elemen dalam kotak - tidak melakukan pengurutan otomatis pada kolom. Mereka memilih elemen mana yang pertama, mana yang datang setelah yang lain, dll.

Saya memikirkan dan melihat beberapa solusi yang mungkin bekerja tergantung pada kasusnya:

  • Seret dan lepas: seksi tetapi tidak berfungsi untuk kisi-kisi panjang dengan menggulir atau paging. Kelemahan lainnya adalah tidak terlihat, Anda mungkin tidak tahu bahwa fungsi ini tersedia. Akhirnya diperlukan ketangkasan. Namun itu dapat digunakan untuk memindahkan lebih dari satu elemen sekaligus.
  • Panah Atas/Bawah: dapat dimengerti dan mudah digunakan untuk gerakan kecil, tetapi membosankan ketika Anda harus memindahkan elemen terakhir di tempat pertama. Juga ketika Anda memindahkan elemen beberapa langkah, Anda harus menangkap panah itu setelah setiap gerakan. Hanya bekerja pada satu elemen pada satu waktu.
  • Kolom indeks: pengguna memasukkan angka yang menunjukkan posisi elemen. Berguna saat pengguna mengetahui posisi absolut yang diinginkan. Sulit menebak apa yang akan terjadi jika nomor yang sudah ada dimasukkan. Hanya bekerja pada satu elemen pada satu waktu.

Saya tergoda untuk menggabungkan dua teknik ini seperti kolom indeks + drag & drop, tapi saya takut untuk mengakumulasi kekurangan keduanya daripada memiliki manfaat keduanya.

Apa saja teknik penataan ulang yang telah terbukti berhasil?

5
Mart

Netflix menggabungkan tiga metode dalam antrian mereka. Anda dapat menarik dan melepas, tetapi juga menentukan nomor baris tertentu, atau klik untuk memindahkannya ke bagian paling atas:

alt text

Apa yang saya temukan menarik tentang pendekatan mereka adalah bahwa mereka telah menempatkan ikon "Atas" (dilingkari hijau) di setiap baris, sebagai lawan mengharuskan pengguna untuk memilih dan kemudian klik di suatu tempat di bagian atas halaman, di mana sebagian besar aplikasi web memasang ikon atau tombol tersebut.

Dalam kasus Anda, saya akan menggunakan drag-and-drop, tetapi akan menempatkan ikon roda gigi di setiap baris:

alt text

Ini akan memungkinkan beberapa tindakan:

  • Pengguna dapat menarik-dan-menjatuhkan satu atau lebih baris

  • Pengguna dapat memilih beberapa baris, lalu klik ikon roda gigi untuk membuat menu tarik turun dan melakukan sejumlah hal, mis. pindahkan pilihan ke atas atau bawah, pindahkan pilihan sejumlah baris tertentu ke atas atau ke bawah (dalam hal ini muncul dialog kecil), salin, potong, dll. Hampir tidak ada batas.

7
Hisham

Hal pertama yang perlu Anda tanyakan pada diri sendiri sebelum Anda mencoba mencari tahu bagaimana melakukannya adalah seberapa sering pengguna akan melakukannya.

Jika itu akan sering digunakan saya akan mencoba untuk membuatnya sehingga Anda menggunakan drag and drop dan cukup gulir halaman secara otomatis setelah pengguna menekan itu treshold tertentu.

Ini adalah aturan praktis yang baik untuk mengatakan bahwa jika pengguna perlu melakukan sesuatu cukup sering dan Anda dapat membuatnya lebih mudah bahkan dengan memperkenalkan beberapa jenis interaksi yang eksotis, lakukanlah. Pengguna tidak masalah dengan kurva belajar karena nantinya akan menguntungkan mereka.

Jika itu tidak akan sering digunakan saya akan melakukan panah atas/bawah, itu mungkin tidak keluar tetapi jelas.

3
ThomPete

Saya akan menggabungkan panah atas/bawah dengan drag'n'drop.

Harus menebak beberapa angka, atau harus mengerjakannya sebelumnya, benar-benar rumit. Dan meskipun tabrakan dapat dan harus ditangani dalam kode, misalnya dengan hanya menambah semua angka yang ada di atau di atas yang dimasukkan, sebagian besar pengguna akan mencoba mencari yang benar sebelumnya, jika hanya karena ketidakpastian tentang bagaimana duplikat atau nomor yang salah akan ditangani.

Panah atas dan bawah adalah cara yang jauh lebih nyaman untuk menyusun ulang jarak pendek.

Untuk jarak yang lebih jauh dan untuk beberapa item bergerak, drag'n'drop dapat ditambahkan. Untuk memastikan kegunaan drag'n'drop pada jarak lebih dari satu halaman, pengguliran otomatis dari grid juga harus diterapkan. Ini berarti bahwa selama operasi seret, kisi akan secara otomatis menggulir ketika Anda menyeret mouse dalam margin tertentu dari batas atas atau bawah kisi. Itulah yang dilakukan oleh Windows Explorer.

Untuk menambah ini lebih jauh, kecepatan gulir dapat mulai lambat dan meningkat saat seret terus berada di area "gulir sensitif". Hati-hati dengan ini, ditambah mengatur kecepatan gulir maksimum: Saya telah didorong untuk marah oleh pengguliran otomatis yang mempercepat begitu banyak dan/atau begitu cepat sehingga saya selalu menggulir melewati mana saya perlu.

0
Marjan Venema

The Drupal CMS memiliki solusi yang relatif baik untuk ini yang skala untuk daftar 30-50 item. Tidak yakin bagaimana itu akan skala yang lebih tinggi.

Mengonfigurasi "blok" situs adalah contoh - lihat tangkapan layar, di bawah.

  • Setiap item memiliki pegangan 4 arah yang dapat diambil untuk operasi drag and drop.
    Pegangan menyediakan "kemampuan" visual yang dapat diseret.
  • Daftar ini dibagi menjadi beberapa bagian.
    Memindahkan item ke bagian tertentu dapat dilakukan dengan memilihnya dari kotak kombo yang ditunjukkan untuk item itu

alt text

Pendekatan "seret dan lepas" jauh lebih halus daripada memiliki panah yang memindahkan item satu langkah. JIRA melakukan itu dan benar-benar melelahkan memasukkan barang ke tempat yang tepat.

0
Bevan

Itu tergantung pada bagaimana Anda pengguna menggunakan sistem:

  • Jika nomor baris bermakna (misalnya posisi dalam antrian), Anda mungkin ingin menampilkannya dan membuatnya dapat diedit.

  • Jika "buat ini dulu" adalah tindakan umum Anda mungkin ingin memperkenalkan tombol "pindah ke atas" (atau pindah ke bawah).

  • Jika pengguna Anda menyukai pintasan keyboard menambah pintasan naik dan turun, pastikan pemilihan/fokus ikuti baris ketika bergerak sehingga menekan pintasan ke atas 3 kali akan benar-benar memindahkan baris ke atas 3 tempat.

  • Anda dapat menambahkan tombol atas/bawah, pengguna saya tidak terlalu menyukainya (pengguna Anda mungkin berbeda)

  • Dan akhirnya, Seret & Jatuhkan, cara favorit pengguna saya untuk menyusun ulang baris - di aplikasi saya tidak ada pegangan seret dan pengguna berhasil menarik & melepas dengan baik (pengguna Anda mungkin berbeda)

Dan, apa pun yang Anda lakukan, pastikan Anda mengujinya pada pengguna spesifik Anda dan lihat bagaimana mereka menyukainya.

0
Nir