HTML Drag & Drop API
Trong HTML, bất kỳ phần tử nào cũng có thể được kéo và thả.
Kéo và thả
Drag and drop (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. Người dùng có thể chọn các phần tử có thể kéo bằng chuột, kéo các phần tử đó vào phần tử có thể kéo và thả chúng bằng cách nhả nút chuột. Một hình trong suốt của các phần tử có thể kéo theo sau con trỏ trong quá trình kéo.
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ tính năng Drag and drop.
API Drag and Drop | Google Chrome | MS Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Ví dụ về kéo và thả trong HTML
Dưới đây là một ví dụ về việc kéo và thả đơn giản:
<!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>
Mọi thứ có vẻ phức tạp, nhưng hãy xem xét 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, hãy đặt thuộc tính draggable
thành true
:
<img draggable="true">
Chỉ định dữ liệu được 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, thuộc tính ondragstart
gọi 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à "text" và giá trị là id của phần tử có thể kéo ("drag1").
Thả ở đâu - ondragover
Sự kiện ondragover
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 hoặc phần tử trong các phần tử khác. Để cho phép thả, cần 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 được thả, 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));
}
Code được giải thích như sau:
- 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ứcsetData()
- 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ả
Xem thêm:
Bạn nên đọc
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Sạc không dây là gì? Nó nhanh hơn hay chậm hơn sạc dây? Danh sách smartphone Android hỗ trợ sạc không dây
Hôm qua -
Cách dùng Terabox lưu trữ với 1TB miễn phí
Hôm qua 5 -
Cách sao chép hoặc tạo bản sao toàn bộ trang tính trong Google Sheets
Hôm qua -
4 cách kiểm tra lịch sử giao dịch BIDV trên điện thoại, máy tính
Hôm qua -
Cách chặn từ khóa và Hashtag trên Twitter
Hôm qua -
Hàm COUNTIFS, cách dùng hàm đếm ô theo nhiều điều kiện trong Excel
Hôm qua -
Cách sửa lỗi không thấy bộ điều hợp mạng trên Windows 10
Hôm qua -
Các cách làm, tùy chỉnh trong bài sẽ giúp tăng tốc Windows 10 của bạn "nhanh như gió"
Hôm qua 6 -
Dynamic System Updates là gì?
Hôm qua -
Valentine đen là gì? Valentine đen là ngày nào?
Hôm qua