Thông tin tài liệu
http://vietjack.com/html5/index.jsp Copyright © vietjack.com Hoạt động Drag Drop HTML5 Drag Drop (DnD) khái niệm Giao diện người sử dụng (User Interface) mạnh mẽ mà giúp dễ dàng để chép, đặt lại thứ tự xóa item với trợ giúp cú nhấn chuột Điều cho phép để nhấn chuột giữ nút chuột di chuyển qua phần tử, kéo tới vị trí khác, bng nút chuột để thả phần tử vị trí Để thực tính kéo thả HTML4 truyền thống, nhà lập trình phải sử dụng chương trình Javascript phức tạp khung Javascript khác jQuery Bây HTML5 đưa giải pháp DnD API mà mang lại hỗ trợ DnD tự nhiên tới trình duyệt, làm cho dẽ dàng để mã hóa HTML5 DnD hỗ trợ tất trình duyệt lớn Chrome, Firefox 3.5 Safari, … Các kiện Drag Drop Có số kiện mà xuất suốt bước hoạt động kéo thả Bảng liệt kê chúng: Sự kiện Miêu tả dragstart Được kích hoạt người sử dụng bắt đầu kéo đối tượng dragenter Được kích hoạt chuột di chuyển lần đầu qua phần tử mục tiêu hoạt động kéo diễn Một Listener cho kiện nên có hay không hoạt động thả cho phép qua vị trí Nếu khơng phép, Listener khơng thực hoạt động nào, hoạt động kéo không phép theo mặc định dragover Được tạo chuột di chuyển qua phần tử hoạt động kéo xảy Hầu hết thời gian, hoạt http://vietjack.com/ Trang chia sẻ các bài học online miễn phí http://vietjack.com/html5/index.jsp Copyright © vietjack.com động giống kiện dragenter dragleave Được tạo chuột rời khỏi phần tử hoạt động kéo diễn Listener nên gỡ bỏ đánh dấu sử dụng cho phản hồi hoạt động thả drag Bắt đầu chuột di chuyển đối tượng kéo drop Sự kiện thả tạo phần tử, nơi mà hoạt động thả xảy cuối hoạt động kéo Một Listener có trách nhiệm thu nhận liệu kéo chèn vị trí thả dragend Tạo người sử dụng thả nút chuột kéo đối tượng Ghi chú: Ghi kiện kéo kích hoạt; kiện chuột mousemove khơng kích hoạt suốt hoạt động kéo Đối tượng DataTransfer Các phương thức listener kiện cho tất kiện kéo thả chấp nhận đối tượngEvent mà có thuộc tính ngẫu nhiên gọi dataTransfer event.dataTransfer trả đối tượng DataTransfer liên kết với kiện sau: function EnterHandler(event) { DataTransfer dt = event.dataTransfer; } Đối tượng DataTransfer giữ liệu hoạt động kéo thả Dữ liệu thu nhận thiết lập theo thuộc tính đa dạng liên kết với đối tượng DataTransfer giải thích đây: STT Các thuộc tính DataTransfer Miêu tả http://vietjack.com/ Trang chia sẻ các bài học online miễn phí http://vietjack.com/html5/index.jsp Copyright © vietjack.com dataTransfer.dropEffect [ = value ] • Trả loại hoạt động mà chọn • Thuộc tính thiết lập, để thay đổi hoạt động chọn • Các giá trị là: none, copy, link, move dataTransfer.effectAllowed [ = value ] • Trả loại hoạt động mà cho phép • Thuộc tính thiết lập để thay đổi hoạt động cho phép • Các giá trị là: none, copy, copyLink, copyMove, link, linkMove, move, all uninitialized dataTransfer.types Trả DOMStringList liệt kê định dạng mà thiết lập kiện dragstart Ngoài ra, file kéo, số kiểu chuỗi “File” dataTransfer.clearData( [ format ] ) Gỡ bỏ liệu định dạng xác định trước Gỡ bỏ tất liệu tham số bỏ trống dataTransfer.setData(format, data) Thêm liệu xác định data = dataTransfer.getData(format) Trả liệu xác định Nếu khơng có liệu nào, trả chuỗi trống http://vietjack.com/ Trang chia sẻ các bài học online miễn phí http://vietjack.com/html5/index.jsp Copyright © vietjack.com dataTransfer.files Trả danh sách file file kéo dataTransfer.setDragImage(element, x, y) Sử dụng phần tử cho để cập nhật phản hồi hoạt động kéo, thay phản hồi xác định trước dataTransfer.addElement(element) Thêm phần tử danh sách phần tử sử dụng để trả phản hồi hoạt động kéo Tiến trình Drag Drop Sau bước để thực hoạt động Drag Drop: Bước 1: Tạo Object Draggable Dưới bước thực hiện: • Nếu bạn muốn kéo phần tử, bạn cần thiết lập thuộc tính draggable truecho phần tử • Thiết lập Event Listener cho dragstart mà lưu giữ liệu kéo • dragstart Event Listener thiết lập tác động cho phép (copy, move, link, số kết hợp khác) Sau ví dụ để tạo Object Dragable: #boxA, #boxB { float:left;padding:10px;margin:10px; -moz-user-select:none; } #boxA { background-color: #6633FF; width:75px; height:75px; } #boxB { backgroundcolor: #FF6699; width:150px; height:150px; } function dragStart(ev) { ev.dataTransfer.effectAllowed='move'; ev.dataTransfer.setData("Text", ev.target.getAttribute('id')); ev.dataTransfer.setDragImage(ev.target,0,0); return true; } Drag and drop HTML5 demo Try to drag the purple box around. Drag Me
Dustbin Nó cho kết sau: Bước 2: Thả đối tượng Để chấp nhận hoạt động thả, mục tiêu thả phải nghe theo kiện: • Sự kiện dragenter, mà sử dụng để định có khơng mục tiêu thả chấp nhận hoạt động thả Nếu hoạt động thả chấp nhận, kiện phải bị hủy • Sự kiện dragover, mà sử dụng để định phản hồi hiển thị tới người sử dụng Nếu kiện bị hủy, phản hồi (đặc trưng trỏ chuột) cập nhật dựa giá trị thuộc tính dropEffect • Cuối cùng, kiện drop, mà cho phép hoạt động thả thực thực Sau ví dụ để thả đối tượng vào đối tượng khác: #boxA, #boxB { float:left;padding:10px;margin:10px;-moz-user-select:none; } #boxA { background-color: #6633FF; width:75px; height:75px; } #boxB { backgroundcolor: #FF6699; width:150px; height:150px; } function dragStart(ev) { ev.dataTransfer.effectAllowed='move'; ev.dataTransfer.setData("Text", ev.target.getAttribute('id')); ev.dataTransfer.setDragImage(ev.target,0,0); return true; } function dragEnter(ev) { event.preventDefault(); return true; } function dragOver(ev) { return false; } function dragDrop(ev) { var src = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(src)); ev.stopPropagation(); return false; } Drag and drop HTML5 demo Try to move the purple box into the pink box. Drag Me
Dustbin Nó cho kết sau: http://vietjack.com/ Trang chia sẻ các bài học online miễn phí ... Drag and drop HTML5 demo Try to move the purple box into the pink box. Drag Me
... dragStart(event)"> Drag Me
Dustbin ... động kéo Tiến trình Drag Drop Sau bước để thực hoạt động Drag Drop: Bước 1: Tạo Object Draggable Dưới bước thực hiện: • Nếu bạn muốn kéo phần tử, bạn cần thiết lập thuộc tính draggable truecho
Ngày đăng: 02/12/2017, 17:24
Xem thêm:
