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ả.
Thí dụ
Kéo hình ảnh W3Schools 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 "lấy" một đối tượng 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ụ về kéo và thả trong HTML
Ví dụ dưới đây là một ví dụ kéo và thả đơn giản:
Thí 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>
Nó có vẻ phức tạp, nhưng chúng ta hãy xem qua tất cả các phần khác nhau của một 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 draggablethuộc tính thành true:
<img draggable="true">
Kéo 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, ondragstartthuộc tính gọi một hàm, kéo (sự kiện), chỉ định dữ liệu nào sẽ được kéo.
Phương dataTransfer.setData()thức đặ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").
Thả ở đâu - ondragover
Sự ondragoverkiện chỉ định nơi dữ liệu được kéo có thể được thả xuống.
Theo mặc định, không thể bỏ dữ liệu / phần tử trong các phần tử khác. Để cho phép giảm, 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 event.preventDefault()phương thức 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 rơi sẽ xảy ra.
Trong ví dụ trên, thuộc tính ondrop gọi một hàm, drop (sự kiện):
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
Mã giải thích:
- Gọi PreventDefault () để ngăn trình duyệt xử lý dữ liệu mặc định (mặc định là 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 thành 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ử đã kéo vào phần tử thả
Các ví dụ khác
Thí dụ
Cách kéo (và thả) một hình ảnh qua lại giữa hai phần tử <div>: