Site icon Blog Dương Trạng

Drag and drop with HTML5

Dương Trạng
Drag and drop with HTML5

Drag and drop with HTML5

Drag & drop (kéo và thả) là một tính năng rất hữu ích và phổ biến trong các web site hiện nay. Tính năng này cho phép người dùng có thể di chuyển các đối tượng từ vị trí này sang vị trí khác trên trang net. Trong bài viết này tôi sẽ triển khai tính năng kéo thả đơn giản bằng HTML5.

HTML5 đã đưa ra API drag and drop (DnD) mang đến hỗ trợ DnD gốc cho trình duyệt giúp việc mã hóa dễ dàng hơn nhiều. HTML 5 DnD được hỗ trợ bởi tất cả các trình duyệt chính như Chrome, Firefox 3.5 và Safari 4,…

Đầu tiên chúng ta sẽ tìm hiểu một số occasion phục vụ cho DnD:

1. Drag and drop Occasions

Occasion On Occasion Handel Fires when… drag ondrag Khi một đối tượng được kéo dragend ondragend Khi kết thúc thao tác kéo đối tượng (VD: thả chuột hoặc nhấn Esc) dragenter ondragenter Kích hoạt khi con trỏ chuột lần đầu di chuyển qua aspect trong khi nó đang kéo 1 đối tượng khác. Một listener cho occasion này nên biết xem có được drop lên khu vực này hay không. Nếu không có listener hoặc listener không thực hiện hành động nào thì sẽ okay được drop. dragexit ondragexit Textual content dragleave ondragleave Khi đối tượng rời khỏi mục tiêu thả hợp lệ. dragover ondragover Khi con trỏ chuột di chuyển qua aspect khi đang kéo 1 đối tượng khác. Luồng xử lí gần như sẽ tương tự như dragenter dragstart ondragstart Khi người dùng bắt đầu kéo đối tượng drop ondrop Khi đối tượng được thả vào mục tiêu thả hợp lệ.

Trên đây là các occasion sử dụng trong việc drag and drop và mục đích của chúng, chúng ta sẽ tìm hiểu các dùng cụ thể ở ví dụ phần sau:

2. Interface

Các Interface của HTML Drag and Drop là DragEvent, DataTransfer, DataTransferItem and DataTransferItemList.

Giao diện DragEvent có một constructor và một thuộc tính dataTransfer, cũng là một đối tượng DataTransfer.

Đối tượng DataTransfer bao gồm trạng thái của drag occasion, như là loại drag đang thực thi (copy, transfer), dữ liệu được kéo (một hoặc nhiều merchandise), và loại MIME của một merchandise. Đối tượng DataTransfer còn có các phương thức để thêm hoặc xóa merchandise khỏi dữ liệu kéo.

DragEvent và DataTransfer được hỗ trợ rộng rãi trên các trình duyệt. Trong khi đó, DataTransferItemvà và DataTransferItemList lại bị hạn chế. Vì vậy ở tính năng này chúng ta sẽ chỉ sử dụng DragEvent và DataTransfer.

3. Các bước xây dựng chức năng Drag and Drop

Bước 1: Xác định đối tượng có thể kéo

Để chỉ định một đối tượng có thể kéo, bạn cần đặt đối tượng đó với thuộc tính dragable = “true” cùng với occasion dragstart để lắng nghe, lưu trữ dữ liệu được kéo và cài đặt các hiêu ứng cho phép.

Ví dụ dứoi đây chỉ định field A là đối tượng người dùng có thể kéo:

<middle> <h2>Drag and drop HTML5</h2> <div>Drag field A round web page.</div> <div id = “boxA” draggable = “true” ondragstart = “return onDragStartHandle(ev)”> <p>Drag Me</p> </div> <div id = “boxB”>Drop zone</div> </middle>

Thêm sự kiện dragstart:

Mỗi drag occasion có một thuốc tính dataTransfer chứa dứ liệu của occasion đó. Chúng ta sử dụng phương thức setData() để thêm dữ liệu vào occasion như sau:

operate onDragStartHandle(ev) { ev.dataTransfer.effectAllowed = ‘transfer’; ev.dataTransfer.setData(“Textual content”, ev.goal.getAttribute(‘id’)); ev.dataTransfer.setDragImage(ev.goal,0,0); return true; }

Lúc này chúng ta có thể kéo đối tượng field A quang trang net:

Bước 2: Thả đối tượng

Để chấp nhận thả, mục tiêu cần thả phải lắng nghe ít nhất ba occasion.

Sau đây là ví dụ để thả một đối tượng vào một đối tượng khác:

<middle> <h2>Drag and drop HTML5</h2> <div>Drag field A round web page and drop Dropzone</div> <div id=”boxA” draggable=”true” ondragstart=”return onDragStartHandle(occasion)”> <p>Drag Me</p> </div> <div id=”boxB” ondragenter=”return onDragEnterHandle(occasion)” ondrop=”return onDropHandle(occasion)” ondragover=”return onDragOverHandle(occasion)”>Drop zone</div> </middle> operate onDragStartHandle(ev) { ev.dataTransfer.effectAllowed=’transfer’; ev.dataTransfer.setData(“Textual content”, ev.goal.getAttribute(‘id’)); ev.dataTransfer.setDragImage(ev.goal,0,0); return true; } operate onDragEnterHandle(ev) { occasion.preventDefault(); return true; } operate onDragOverHandle(ev) { return false; } operate onDropHandle(ev) { var src = ev.dataTransfer.getData(“Textual content”); ev.goal.appendChild(doc.getElementById(src)); ev.stopPropagation(); return false; }

Có nhiều trường hợp mà chúng ta có thể áp dụng drag và drop, ví dụ như việc add file bằng drag & drop. Chúng ta cũng có thể customized thêm nhiều hiêu ứng để góp phần tiện ích hơn cho ứng dụng web site của mình.

Tài liệu tham khảo:

https://developer.mozilla.org/en-US/docs/Internet/API/HTML_Drag_and_Drop_API

Exit mobile version