HTML - Drag and Drop API: Hướng dẫn cho người mới bắt đầu

Xin chào các bạnfuture web developers! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của HTML5's Drag and Drop API. Là người giáo viên máy tính gần gũi của bạn, tôi ở đây để hướng dẫn bạn qua tính năng thú vị này có thể làm cho trang web của bạn trở nên tương tác và thân thiện hơn với người dùng. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và cùng nhau khám phá nhé!

HTML - Drag & Drop API

Drag and Drop API là gì?

Trước khi chúng ta bắt đầu kéo và thả các yếu tố xung quanh như những phù thủy kỹ thuật số, hãy hiểu rõ API này là về điều gì. API Kéo và Thả (DnD) cho phép chúng ta làm cho các yếu tố HTML có thể kéo, nghĩa là người dùng có thể nhấp vào một yếu tố, kéo nó đến một vị trí mới và thả nó ở đó. Đó giống như cho các yếu tố trang web của bạn những siêu năng lực!

Làm cho một Yếu tố Có thể Kéo

Hãy bắt đầu từ những điều cơ bản. Để làm cho một yếu tố có thể kéo, chúng ta cần sử dụng thuộc tính draggable. Nó đơn giản như thêm thuộc tính này vào bất kỳ yếu tố HTML nào bạn muốn người dùng có thể di chuyển.

<div draggable="true">Kéo tôi!</div>

Trong ví dụ này, chúng ta đã tạo một phần tử <div> và làm cho nó có thể kéo bằng cách đặt draggable="true". Bây giờ, người dùng có thể nhấp vào div này và kéo nó xung quanh trang. Đ酷, phải không?

Nhưng đợi đã, còn nhiều hơn nữa! Chỉ làm cho một yếu tố có thể kéo thôi là chưa đủ. Chúng ta cần thêm một chút JavaScript để kiểm soát những gì xảy ra khi yếu tố bị kéo và thả. Đó là nơi các sự kiện kéo và thả của chúng ta phát huy tác dụng.

Sự Kiện Kéo và Thả

API Kéo và Thả cung cấp cho chúng ta nhiều sự kiện mà chúng ta có thể lắng nghe và phản hồi. Những sự kiện này cho phép chúng ta kiểm soát toàn bộ quá trình kéo và thả. Hãy cùng nhìn vào các sự kiện chính:

Tên Sự Kiện	Mô Tả
dragstart	Bị kích hoạt khi người dùng bắt đầu kéo một yếu tố
drag	Bị kích hoạt liên tục trong khi người dùng đang kéo một yếu tố
dragenter	Bị kích hoạt khi một yếu tố bị kéo vào một mục tiêu thả hợp lệ
dragover	Bị kích hoạt liên tục trong khi một yếu tố bị kéo đang ở trên một mục tiêu thả hợp lệ
dragleave	Bị kích hoạt khi một yếu tố bị kéo rời khỏi một mục tiêu thả hợp lệ
drop	Bị kích hoạt khi người dùng thả một yếu tố
dragend	Bị kích hoạt khi kết thúc quá trình kéo (dù thành công hay không)

Bây giờ, hãy xem cách chúng ta có thể sử dụng những sự kiện này trong thực tế:

<div id="draggable" draggable="true">Kéo tôi!</div>
<div id="droppable">Thả ở đây!</div>

<script>
const draggable = document.getElementById('draggable');
const droppable = document.getElementById('droppable');

draggable.addEventListener('dragstart', (e) => {
console.log('Bắt đầu kéo');
});

droppable.addEventListener('dragover', (e) => {
e.preventDefault(); // Cần thiết để cho phép thả
console.log('Kéo qua khu vực thả');
});

droppable.addEventListener('drop', (e) => {
e.preventDefault();
console.log('Thả!');
droppable.appendChild(draggable);
});
</script>

Trong ví dụ này, chúng ta đã tạo hai phần tử <div>: một có thể kéo và một có thể thả. Chúng ta đã thêm các bộ lắng nghe sự kiện cho dragstart, dragover, và drop. Khi bạn kéo và thả phần tử vào khu vực thả, bạn sẽ thấy các tin nhắn trong console, và phần tử bị kéo sẽ được di chuyển vào khu vực thả.

Đối tượng DataTransfer

Bây giờ, hãy nói về một công cụ mạnh mẽ trong bộ công cụ kéo và thả của chúng ta: đối tượng DataTransfer. Đối tượng này được sử dụng để giữ dữ liệu đang bị kéo trong quá trình kéo và thả. Nó cho phép chúng ta đặt và lấy thông tin về quá trình kéo.

Dưới đây là cách chúng ta có thể sử dụng nó:

<div id="draggable" draggable="true">Kéo tôi!</div>
<div id="droppable">Thả ở đây!</div>

<script>
const draggable = document.getElementById('draggable');
const droppable = document.getElementById('droppable');

draggable.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', e.target.id);
});

droppable.addEventListener('dragover', (e) => {
e.preventDefault();
});

droppable.addEventListener('drop', (e) => {
e.preventDefault();
const data = e.dataTransfer.getData('text');
const draggedElement = document.getElementById(data);
e.target.appendChild(draggedElement);
});
</script>

Trong ví dụ này, chúng ta đang sử dụng setData() để lưu trữ ID của phần tử bị kéo khi bắt đầu kéo. Sau đó, trong sự kiện drop, chúng ta lấy dữ liệu này sử dụng getData() và sử dụng nó để di chuyển phần tử bị kéo.

Quá trình Kéo và Thả

Bây giờ chúng ta đã xem xét các phần tử đơn lẻ, hãy cùng đi qua toàn bộ quá trình kéo và thả:

Khởi động Kéo: Người dùng nhấp vào một phần tử có thể kéo và bắt đầu kéo.
Kéo: Khi người dùng di chuyển chuột, sự kiện drag bị kích hoạt liên tục.
Vào Khu Vực Thả: Khi phần tử bị kéo vào một khu vực thả hợp lệ, sự kiện dragenter bị kích hoạt.
Trên Khu Vực Thả: Khi phần tử bị kéo đang ở trên khu vực thả, sự kiện dragover bị kích hoạt liên tục.
Rời Khu Vực Thả: Nếu phần tử bị kéo rời khỏi khu vực thả, sự kiện dragleave bị kích hoạt.
Thả: Khi người dùng thả phần tử, sự kiện drop bị kích hoạt.
Kết thúc Kéo: Cuối cùng, sự kiện dragend bị kích hoạt để báo hiệu kết thúc quá trình kéo.

Dưới đây là một ví dụ toàn diện kết hợp tất cả:

<div id="draggable" draggable="true">Kéo tôi!</div>
<div id="droppable">Thả ở đây!</div>

<script>
const draggable = document.getElementById('draggable');
const droppable = document.getElementById('droppable');

draggable.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', e.target.id);
e.target.style.opacity = '0.5';
});

draggable.addEventListener('dragend', (e) => {
e.target.style.opacity = '';
});

droppable.addEventListener('dragenter', (e) => {
e.target.style.background = 'lightblue';
});

droppable.addEventListener('dragleave', (e) => {
e.target.style.background = '';
});

droppable.addEventListener('dragover', (e) => {
e.preventDefault();
});

droppable.addEventListener('drop', (e) => {
e.preventDefault();
const data = e.dataTransfer.getData('text');
const draggedElement = document.getElementById(data);
e.target.appendChild(draggedElement);
e.target.style.background = '';
});
</script>

Trong ví dụ này, chúng ta đã triển khai tất cả các sự kiện kéo và thả. Chúng ta thay đổi độ mờ của phần tử bị kéo trong quá trình kéo, nổi bật khu vực thả khi phần tử bị kéo vào nó, và di chuyển phần tử bị kéo vào khu vực thả khi nó được thả.

Và thế là xong, các bạn! Bạn đã học được cơ bản của HTML5 Drag and Drop API. Với kiến thức này, bạn có thể tạo ra các yếu tố tương tác trên trang web của bạn mà người dùng có thể kéo và thả. Hãy nhớ, thực hành là chìa khóa, vì vậy đừng ngần ngại thử nghiệm và tạo ra các dự án kéo và thả của riêng bạn.

Khi kết thúc bài học này, tôi nhớ đến một câu nói của Bruce Lee: "Tôi không sợ người đã thực hành 10.000 cú đá một lần, nhưng tôi sợ người đã thực hành một cú đá 10.000 lần." Vậy, hãy ra ngoài và thực hành kỹ năng kéo và thả của bạn. Trước khi bạn biết, bạn sẽ tạo ra những trải nghiệm web tương tác tuyệt vời sẽ làm cho người dùng của bạn ngạc nhiên!

Chúc các bạn may mắn và mong rằng các phần tử của bạn luôn rơi vào đúng nơi bạn muốn!

Credits: Image by storyset

Hướng Dẫn Trước:

HTML - API Định vị

Hướng Dẫn Tiếp Theo:

HTML - Web Workers API