Làm thế nào để tạo một giao diện Droppable trong CSS3 - núm vú

Đôi khi người dùng cần kéo một mục vào một thùng chứa và bỏ nó vào thùng chứa. Có rất nhiều trường hợp của quá trình CSS3 này trong các ứng dụng hiện tại.

Chẳng hạn, khái niệm kéo một mục vào thùng rác có thể và bỏ nó để xóa nó là nhất quán trên tất cả các nền tảng. Nếu bạn muốn gửi một mục cho máy in, bạn kéo biểu tượng của nó vào biểu tượng máy in và thả nó vào đó.

Tất nhiên, để tạo hiệu ứng này, bạn phải có một mục có thể kéo được và một mục khác có thể bị bỏ. Ví dụ này dựa vào một số CSS tùy chỉnh để tạo một hiệu ứng đặc biệt trên màn hình.

#FillMe {border: solid; chiều rộng: 400px; chiều cao: 10m; text-align: trung tâm; chiều cao dòng: 10e; vị trí: tuyệt đối; trên cùng: 250px; trái: 250px;}. Đã điền {background-color: lightblue;}

Có hai trạng thái cho bộ chứa droppable: trống rỗng và đầy. Nó bắt đầu trống rỗng và sử dụng kiểu #FillMe. Khi đoạn văn có thể kéo được thả vào đoạn droppable, phong cách thay đổi thành. Đã điền. Đoạn mã sau cho thấy cách kéo và thả có thể làm việc cùng nhau để tạo ra tương tác người dùng mong muốn này.

Bạn có thể tìm thấy mã hoàn chỉnh cho ví dụ này trong thư mục Chương 06Interactions của mã có thể tải xuống dưới dạng DropContent. HTML. <$ $ (function () {$ ("# MoveMe")) draggable (); $ ("# FillMe") droppable ({thả: chức năng (sự kiện, ui) {$ (this) addClass ("Filled "). html (" Filled! ");}});});

Ví dụ này sử dụng cùng một mã cho thẻ MoveMe

. Thẻ thứ hai

, có id của FillMe, hoạt động như một thùng chứa. Khi người dùng kéo MoveMe đến FillMe, đoạn mã gọi hàm ẩn danh liên quan đến sự kiện drop.

Lưu ý cách ví dụ bắt đầu bằng tên sự kiện, tiếp theo là dấu hai chấm (:), tiếp theo là hàm nặc danh để xử lý sự kiện đó. Chú ý cách mã sử dụng addClass () để sửa đổi lớp của FillMe. Phương thức droppable () hỗ trợ các sự kiện này:

create: Chỉ ra rằng mục droppable đã được tạo ra.

• kích hoạt: Chỉ ra rằng một mục có thể kéo được đang hoạt động. Bạn có thể sử dụng sự kiện này để thay đổi kiểu mục droppable để người dùng có thể xem nơi để thả một mục.

• hủy kích hoạt: Cho biết người dùng đã dừng kéo một mục. Bạn có thể sử dụng sự kiện này để thay đổi phong cách thả xuống về trạng thái ban đầu.

• over: Khởi động khi mục có thể kéo được trên đầu mục có thể bị bỏ. Bạn có thể sử dụng sự kiện này để chỉ ra khi nào người dùng thả con trỏ vào thùng chứa.

• ra: Khởi chạy khi mặt hàng có thể kéo ra khỏi thùng chứa item có thể giảm giá.Bạn có thể sử dụng sự kiện này để nói với người dùng rằng không còn có thể thả một mục vào trong vùng chứa.

• thả: Thông báo cho các mục droppable (container) rằng nó đã nhận được một mục có thể kéo.

• Bạn có thể tạo một trình xử lý sự kiện cho bất kỳ sự kiện nào bạn muốn xử lý trong mã của bạn. Trên thực tế, có nhiều cơ hội cho các hiệu ứng đặc biệt sẽ tập trung sự chú ý của người dùng.