HTML Drag - Drop

Drag - Drop là gì?

Drag và Drop là một kỹ thuật tương tác trong giao diện người dùng, nó cho phép người dùng kéo các đối tượng từ vị trí này và thả chúng vào vị trí khác trên màn hình.

Drag - Kéo: là sự kiện người dùng nhấp vào một đối tượng và giữ chuột, sau đó di chuyển chuột đến vị trí mới.
Drop - Thả : là sự kiện người dùng thả chuột để đặt đối tượng vào vị trí mới.

Drag và Drop giúp tạo ra trải nghiệm người dùng linh hoạt và thân thiện hơn, giúp thực hiện các thao tác một cách dễ dàng và trực quan.

HTML Drag and Drop API là gì?

HTML Drag and Drop API là chức năng cung cấp các phương thức để tạo ra các ứng dụng web hỗ trợ chức năng kéo và thả một cách dễ dàng và trực quan. API này cho phép các phần tử HTML có thể được kéo và thả giữa các vị trí khác nhau trong cùng một trang web hoặc giữa các trang khác nhau.

Ví dụ viết code chương trình kéo thả hình ảnh từ khung hình này sang khung hình khác như sau:

Ví dụ

<!DOCTYPE html>

<head>

<title>Drag and Drop Demo ihoclaptrinh.com</title>

<style>

#item_div1 {

float: left;

width: 220px;

height: 68px;

background-color: white;

border: 2px dashed #7f8c8d;

}

#item_div2 {

float: left;

width: 220px;

height: 68px;

margin-left: 20px;

background-color: white;

border: 2px dashed #06c43f;

}

#drag1 {

cursor: pointer;

user-select: none;

}

</style>

</head>

<body>

</div>

const item_div1 = document.getElementById("item_div1");

const item_div2 = document.getElementById("item_div2");

function drag_Function(event) {

event.dataTransfer.setData("text", event.target.id);

}

function drop_Function(event) {

event.preventDefault();

var data = event.dataTransfer.getData("text");

event.target.appendChild(document.getElementById(data));

item_div1.style.backgroundColor = "white";

item_div2.style.backgroundColor = "white";

}

function dragover_item1(event) {

event.preventDefault();

item_div1.style.backgroundColor = "#3498db";

}

function dragover_item2(event) {

event.preventDefault();

item_div2.style.backgroundColor = "#3498db";

}

function dragleave_item1(event) {

event.preventDefault();

item_div1.style.backgroundColor = "white";

}

function dragleave_item2(event) {

event.preventDefault();

item_div2.style.backgroundColor = "white";

}

</script>

</body>

</html>

Cách sử dụng Drag and Drop API

Cách sử dụng cách kéo (Drag) và thả (Drop) các phần tử hoặc đối tượng từ ví dụ ở bên trên như sau:

-Bước 1: Sử dụng thuộc tính draggable="true" để tạo một phần tử có thể kéo (Drag).

Ví dụ code tạo một hình ảnh sử dụng thuộc tính draggable có thể kéo thả như sau:

Ví dụ

-Bước 2: Thêm sự kiện ondragstart cho vùng hoặc đối tượng để kéo .

Ví dụ code thêm sự kiện ondragstart như sau:

Ví dụ

-Bước 3:Thiết lập đặt dữ liệu có thể kéo (drag) trong sự kiện dragstart.

Ví dụ sử dụng phương thức dataTransfer.setData() để set cho dữ liệu kéo như sau:

Ví dụ

function drag_Function(event) {

event.dataTransfer.setData("text", event.target.id);

}

-Bước 4: Xử lý sự kiện kéo đối tượng di chuyển vào vùng thả (dragover)

Ví dụ code để kéo di chuyển đối tượng vào vùng thả như sau:

Ví dụ

function dragover_item1(event) {

event.preventDefault();

item_div1.style.backgroundColor = "#3498db";

}

-Bước 5: Xử lý dự kiện thả đối tượng vào vùng thả (drop).

Ví dụ code sử dụng phương thức dataTransfer.getData() để lấy dữ liệu kéo thả đối tượng vào vùng thả như sau:

Ví dụ

function drop_Function(event) {

event.preventDefault();

var data = event.dataTransfer.getData("text");

event.target.appendChild(document.getElementById(data));

item_div1.style.backgroundColor = "white";

item_div2.style.backgroundColor = "white";

}

Ứng dụng của Drag và Drop.

Nhờ sự kéo thả trực quan và linh hoạt nên Drag và Drop được ứng dụng rất nhiều trong các ứng dụng chương trình phần mềm và App hiện nay.

- Tạo giao diện kéo thả cho các phần mềm, App ứng dụng thi chắc nghiệm, kiểm tra và học online.

- Tạo chương trình quản lý File, tệp tin: kéo thả file tệp tin, thư mục một cách dễ dàng, trực quan và tiết kiệm thao tác.

- Tạo các chương trình trò chơi ghép đoán vật, con vật hoặc câu đố kéo thả chọn đáp án...

- Tạo chương trình quản lý danh sách: Chó phép kéo thả sắp xếp danh sách một cách dễ dàng linh hoạt.