Tính năng kéo thả (Drag and Drop) trong HTML5

Tính năng kéo thả là một phần tiêu chuẩn trong HTML5.

Kéo thả là tính năng rất phổ biến. Bạn “tóm” một đối tượng và thả nó vào vị trí khác.

Trong HTML5, tính năng kéo thả là một phần của tiêu chuẩn phải có, và bất kỳ đối tượng nào cũng có thể kéo thả được.


Trình duyệt hỗ trợ

API  Chrome  IE FireFox  Safari Opera
Kéo thả  4.0  9.0  3.5  6.0  12.0

Ví dụ đoạn code có tính năng kéo thả

<!DOCTYPE HTML>
<html>
<head>

<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>

<script>
function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

Kéo hình ảnh của Kiến càng vào hình chữ nhật:

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

Cách làm một đối tượng có thể kéo thả

Trước tiên để làm một đối tượng có thể kéo thả, bạn cần để thuộc tính draggable là true, ví dụ:

<img draggable="true">

Kéo cái gì – ondragstart và setData()

Điều gì xảy ra khi đối tượng được kéo.

Trong ví dụ trên, thuộc tính ondragstart gọi một hàm, drag (event), chỉ rõ dữ liệu nào được kéo.

Phương thức dataTransfer.setData() thiết lập các kiểu dữ liệu và giá trị của dữ liệu kéo:

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

Trong trường hợp này, kiểu dữ liệu là “text” và giá trị là id của phần tử được kéo (“drag1”).


Khi nào thả – ondragover

Sụ kiện ondragover chỉ định nơi nào dữ liệu kéo có thể được thả.

Theo mặc định, dữ liệu/các phần tử không thể được thả (drop) vào bên trong phần tử khác. Để khả năng thả (drop) được cho phép, chúng ta phải loại bỏ tính năng mặc định này của thẻ/phần tử.

Điều đó được thực hiện bằng cách gọi phương thức event.preventDefault() cho sự kiện:

event.preventDefault()

Thực hiện thả – ondrop

Sau khi kéo và thả dữ liệu, một sự kiện thả xảy ra.

Trong ví dụ trên, thuộc tính ondrop gọi một hàm, drop(event):

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData(“text”);
ev.target.appendChild(document.getElementById(data));
}

Giải thích code:

  • Gọi preventDefault() để chặn các tính năng xử lý mặc định của trình duyệt với dữ liệu;
  • Lấy dữ liệu được kéo với phương thức dataTransfer.getData(), phương thức này sẽ trả về bất kỳ dữ liệu nào đã được thiết lập để cùng loại trong phương thức SetData();
  • Dữ liệu kéo là id của phần tử kéo(“drag1”);
  • Nối phần tử kéo vào phần tử thả;