it-swarm.asia

Bagaimana cara membuat baris tabel pada halaman web terlihat dapat diseret?

Saya memiliki tabel di halaman web di mana saya harus membiarkan pengguna memesan ulang baris. Saya berpikir untuk membiarkan pengguna menyeret baris untuk mengatur ulang mereka. Tetapi bagaimana saya memberi tahu pengguna bahwa ia bisa melakukan itu? Haruskah saya membuat sel kosong sebagai kolom pertama dengan titik atau garis vertikal seperti yang dimiliki gmail untuk setiap email di kotak masuk? Di mana saya bisa mendapatkan gambar seperti itu? Apakah saya menggunakan ikon "pegangan tangan" untuk kursor atau kursor "bergerak"? Apakah saya menunjukkan kursor sambil melayang di atas meja atau hanya "ambil area"? Apakah saya membiarkan pengguna mengambil bagian dari baris untuk diseret?

12
Adam

37signals ' Basecamp bekerja dengan sangat baik:

Basecamp's drag indicator

Saat mengarahkan item, kontrol muncul di sebelah kiri item. Salah satu kontrol adalah panah atas/bawah. Saat mengarahkan kontrol itu, kursor mouse berubah menjadi kursor bergerak. Menekan tombol mouse akan memindahkan posisi item yang diambil pada sumbu vertikal yang sesuai dengan posisi mouse. Melepaskan tombol mouse akan menjatuhkan item ke posisi terdekat yang dapat diterima. Posisi item yang diseret terus diperbarui pada layar sehingga Anda tahu di mana itu.

Gmail tasks drag indicator

Fitur Tugas Gmail menanganinya sedikit berbeda dengan menunjukkan permukaan seret ke kiri ketika Anda mengarahkan kursor ke suatu item. Melayang di atas permukaan seret mengubah kursor menjadi ikon tangan (bukan ikon ambil, yang merupakan tangan tertutup). Perilaku selanjutnya identik dengan Basecamp.

Untuk informasi lebih lanjut tentang pola ini, lihat Perpustakaan Pola Desain Yahoo dan merujuk ke kisi storyboard saat-saat menarik .

22
Rahul

Selama tata letak Anda tidak terlalu penuh, mengalikan petunjuk tidak membantu pengguna mengetahui fitur apa yang tersedia.

Selain pegangan seret, Anda mungkin ingin menambahkan judul "Seret baris untuk menyusun ulang" di dekat bagian atas tabel Anda.

0
Pierre