API kéo và thả HTML
Trong HTML, bất kỳ phần tử nào cũng có thể được kéo và thả.
Ví dụ
Kéo hình ảnh Example.com.vn vào hình chữ nhật.
Kéo và thả
Kéo và thả là một tính năng rất phổ biến. Đó là khi bạn "nắm" một vật thể và kéo nó đến một vị trí khác.
Hỗ trợ trình duyệt
Các con số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ tính năng Kéo và Thả.
API | |||||
---|---|---|---|---|---|
Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Ví dụ kéo và thả HTML
Ví dụ dưới đây là một ví dụ kéo và thả đơn giản:
Ví dụ
<!DOCTYPE HTML>
<html>
<head>
<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>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>
Hãy tự mình thử »Nó có vẻ phức tạp nhưng hãy xem qua tất cả các phần khác nhau của sự kiện kéo và thả.
Tạo một phần tử có thể kéo được
Trước hết: Để làm cho một phần tử có thể kéo được, hãy đặt thuộc tính draggable
thành true:
<img draggable="true">
Cần kéo cái gì - ondragstart và setData()
Sau đó, chỉ định điều gì sẽ xảy ra khi phần tử được kéo.
Trong ví dụ trên, thuộc tính ondragstart
gọi một hàm, drag(event), chỉ định dữ liệu nào sẽ được kéo.
Phương thức dataTransfer.setData()
đặt kiểu dữ liệu và giá trị của dữ liệu được 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à "văn bản" và giá trị là id của phần tử có thể kéo ("drag1").
Nơi để thả - ondragover
Sự kiện ondragover
chỉ định nơi có thể thả dữ liệu được kéo.
Theo mặc định, dữ liệu/phần tử không thể bị loại bỏ trong các phần tử khác. Để cho phép thả, chúng ta phải ngăn việc xử lý mặc định của phần tử.
Điều này được thực hiện bằng cách gọi phương thức event.preventDefault()
cho sự kiện ondragover:
event .preventDefault()
Thực hiện thả - ondrop
Khi dữ liệu được kéo bị loại bỏ, sự kiện thả sẽ xảy ra.
Trong ví dụ trên, thuộc tính ondrop gọi hàm drop(event):
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
Mã giải thích:
- Gọi ngăn chặnDefault() để ngăn việc xử lý dữ liệu mặc định của trình duyệt (mặc định được mở dưới dạng liên kết khi thả)
- Lấy dữ liệu được kéo bằng phương thức dataTransfer.getData(). Phương thức này sẽ trả về bất kỳ dữ liệu nào được đặt cùng loại trong phương thức setData()
- Dữ liệu được kéo là id của phần tử được kéo ("drag1")
- Nối phần tử được kéo vào phần tử thả