Làm cách nào để tạo một hàng của bảng trên trang web trông có thể kéo được?
Tôi có một bảng trên một trang web nơi tôi cần cho phép người dùng sắp xếp lại các hàng. Tôi đã nghĩ đến việc cho phép người dùng kéo các hàng để sắp xếp lại chúng. Nhưng làm thế nào tôi có thể cho người dùng biết rằng anh ta có thể làm điều đó? Tôi có nên tạo một ô trống làm cột đầu tiên có các dấu chấm hoặc các đường thẳng đứng như gmail có cho mỗi email trong hộp thư đến không? Tôi có thể lấy một hình ảnh như thế ở đâu? Tôi có sử dụng biểu tượng "bàn tay nắm lấy" cho con trỏ hoặc con trỏ "di chuyển" không? Tôi có hiển thị con trỏ trong khi di chuột qua bảng hoặc chỉ "khu vực lấy" không? Tôi có để người dùng lấy bất kỳ phần nào của hàng để kéo không?
37signals ' Basecamp thực hiện công việc tuyệt vời này:
Khi di chuột qua một mục, các điều khiển xuất hiện ở bên trái của mục. Một trong những điều khiển là một mũi tên lên/xuống. Khi di chuột qua điều khiển đó, con trỏ chuột sẽ thay đổi thành con trỏ di chuyển. Giữ nút chuột sẽ di chuyển vị trí của vật bị bắt trên trục tung tương ứng với vị trí của chuột. Nhả nút chuột làm rơi vật phẩm ở vị trí chấp nhận được gần nhất. Vị trí của mục được kéo được cập nhật liên tục trên màn hình để bạn biết vị trí của nó.
Tính năng Nhiệm vụ của Gmail xử lý nó một chút khác nhau bằng cách hiển thị bề mặt kéo sang trái khi bạn di chuột qua một mục. Di chuột qua bề mặt kéo sẽ thay đổi con trỏ thành biểu tượng bàn tay (không phải biểu tượng lấy, đó là bàn tay đóng). Hành vi hơn nữa là giống hệt với Basecamp.
Để biết thêm thông tin về mẫu này, hãy tham khảo Thư viện mẫu thiết kế Yahoo và tham khảo lưới phân cảnh khoảnh khắc thú vị .
Miễn là bố cục của bạn không quá đông, việc nhân các gợi ý sẽ giúp người dùng tìm ra những tính năng có sẵn.
Do đó, ngoài các điều khiển kéo, do đó bạn có thể muốn thêm chú thích "Kéo hàng để sắp xếp lại" gần đầu bảng.