HTML5: Kéo và thả (Drag and Drop)
Kéo và thả là một phần của chuẩn HTML5. HTML5 hỗ trợ những thao tác này ở tất các phần tử.
Trình duyệt hỗ trợ
Internet Explorer 9+, Firefox, Opera, Chrome và Safari đều hỗ trợ những thao tác kéo và thả của HTML5.
Lưu ý: Safari 5.1.2 không hỗ trợ các thao tác kéo và thả.
Ví dụ về kéo và thả trong HTML5
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#div1{width:350px; height:70px; padding:3px; border:green thin solid; box-sizing:border-box;}
</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>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<br>
<img id="drag1" src="nguồn_ảnh" draggable="true" ondragstart="drag(event)" width="330" height="50" title="Bạn thử kéo ảnh vào ô bên trên nhé!">
</body>
</html>
Ví dụ trên có thế áp dụng cho bất kỳ sự kiện kéo thả nào.
Tạo một phần tử có thể kéo được
Ta chỉ cần sử dụng thuộc tính draggable và đặt giá trị true cho nó, ví dụ:
<img draggable="true">
Sử dụng sự kiện ondragstart và phương thức setData() để kéo
Khi bạn nhấn chọn đối tượng và kéo thì sự kiện ondragstart sẽ được kích hoạt, ta thiết lập một lời gọi đến hàm xử lý thao tác kéo (ví dụ dưới đây là hàm drag()).
Trong hàm xử lý thao tác kéo ta sử dụng phương thức dataTransfer.setData() để thiết lập kiểu dữ liệu và giá trị của dữ liệu được kéo như sau:
function drag(ev){
ev.dataTransfer.setData("Text", ev.target.id);
}
,trong đó kiểu đối tượng ở đây là "Text" và giá trị của đối tượng là id của phần tử được kéo (phần tử được kéo ở đây là ảnh có id="drag1").
Sử dụng sự kiện ondragover để thả
Khi bạn thả đối tượng ra thì sự kiện ondragover sẽ được kích hoạt, sự kiện này sẽ xác định vị trí của đối tượng sau khi nó được thả.
Theo mặc định thì ta không thể thả một đối tượng vào trong một đối tượng khác. Tuy nhiên ta có thể khắc phục được điều này bằng cách sử dụng phương thức event.preventDefault().
Sự kiện ondrop
Sự kiện này được kích hoạt khi bạn thả đối tượng. Ta sẽ cho sự kiện ondrop gọi đến phương thức drop() có mã lệnh như sau:
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData( "Text");
ev.target.appendChild( document.getElementById(data));
}
Giải thích mã lệnh:
Ø Phương thức preventDefault() dùng để yêu cầu trình duyệt cho phép thả một đối tượng vào một đối tượng khác
Ø Phương thức dataTransfer.getData("Text") được dùng để lấy kiểu đối tượng được kéo. Phương thức này sẽ lấy kiểu đối tượng được xác định từ phương thức setData()
Ø Đối tượng được kéo tương đương với phần tử có ID được chuyền đi (trong trường hợp này ID="drag1" là của phần tử <img>)
Ø Đưa phần tử được kéo vào phần tử chứa.