Hướng dẫn drag and drop javascript - kéo và thả javascript
Đã đăng vào thg 11 19, 2017 4:16 CH 3 phút đọc 3 phút đọc Drag và Drop (DnD) là khái niệm Giao diện người sử dụng (User Interface) mạnh mẽ mà giúp nó dễ dàng để sao chép, đặt lại thứ tự và xóa các item với sự trợ giúp của các cú nhấn chuột. Điều này cho phép để nhấn chuột và giữ nút chuột di chuyển qua một phần tử, kéo nó tới vị trí khác, và buông nút chuột để thả phần tử tại vị trí đó. Để thực hiện tính năng kéo và thả này trong HTML4 truyền thống, các nhà lập trình sẽ hoặc phải sử dụng chương trình Javascript phức tạp hoặc các khung Javascript khác như jQuery. Bây giờ HTML5 đưa ra giải pháp DnD API mà mang lại sự hỗ trợ DnD tự nhiên tới trình duyệt, làm cho nó dẽ dàng hơn để mã hóa. HTML5 DnD được hỗ trợ bởi tất cả các trình duyệt lớn như Chrome, Firefox 3.5 và Safari, … Các sự kiện Drag và Drop Có một số sự kiện mà xuất hiện trong suốt các bước của hoạt động kéo và thả. Bảng dưới đây liệt kê chúng:
Ghi chú: Ghi chú rằng chỉ các sự kiện kéo được kích hoạt; các sự kiện về chuột như mousemove không được kích hoạt trong suốt hoạt động kéo. Ghi chú rằng chỉ các sự kiện kéo được kích hoạt; các sự kiện về chuột như mousemove không được kích hoạt trong suốt hoạt động kéo. Sau đây là các bước để thực hiện hoạt động Drag và Drop: Bước 1: Tạo một Object Draggable Dưới đây là các bước thực hiện:Bước 1: Tạo một Object Draggable Dưới đây là các bước thực hiện: Nếu bạn muốn kéo một phần tử, bạn cần thiết lập thuộc tính draggable về true cho phần tử đó. Thiết lập một Event Listener cho dragstart mà lưu giữ dữ liệu được kéo. dragstart của Event Listener sẽ thiết lập các tác động được cho phép (copy, move, link, hoặc một số sự kết hợp khác). Sau đây là ví dụ để tạo một Object Dragable:
Bước 2: Thả một đối tượng Để chấp nhận một hoạt động thả, mục tiêu thả phải nghe theo ít nhất 3 sự kiện: Sự kiện dragenter, mà được sử dụng để quyết định có hoặc không mục tiêu thả chấp nhận hoạt động thả. Nếu hoạt động thả được chấp nhận, thì khi đó sự kiện này phải bị hủy. Sự kiện dragover, mà được sử dụng để quyết định phản hồi nào là được hiển thị tới người sử dụng. Nếu sự kiện bị hủy, thì khi đó phản hồi (đặc trưng là con trỏ chuột) được cập nhật dựa trên giá trị của thuộc tính dropEffect. Cuối cùng, sự kiện drop, mà cho phép hoạt động thả thực sự được thực hiện. Sau đây là ví dụ để thả một đối tượng vào trong đối tượng khác:
Từ các event bạn có thể add request ajax vào ứng dụng bạn sẽ tiện dung hơn All rights reserved |