Tính năng kéo thả trong HTML5
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ó vào một vị trí khác. Trong HTML5, kéo và thả là một phần của tiêu chuẩn: bất kỳ phần tử nào cũng có thể kéo được. Trình duyệt hỗ trợ Các số trong bảng xác định ...
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ó vào một vị trí khác. Trong HTML5, kéo và thả là một phần của tiêu chuẩn: bất kỳ phần tử nào cũng có thể kéo được.
Trình duyệt hỗ trợ
Các số trong bảng xác định phiên bản trình duyệt đầu tiên hỗ trợ Kéo và Thả.
Ví dụ tính năng kéo thả trong HTML5
Dưới đây là một ví dụ 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)” awidth=”336″ height=”69″></body>
</html>
Nhìn thì có vẻ phức tạp nhưng ví dụ trên biểu diễn môt thao tác kéo thả đơn giản trong HTML5.
Tạo một phần tử Draggable
Trước hết: để tạo ra một phần tử draggable, thiết lập thuộc tính draggable thành true:
<img draggable=”true”>
Kéo cái gì – ondragstart và setData ()
Sau đó, chỉ định điều gì sẽ xảy ra khi phần tử bị kéo. Trong ví dụ trên, thuộc tính ondragstart gọi một hàm, kéo (sự kiện), xác định dữ liệu phải được kéo.
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:
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 được (“drag1”).
Thả ở đâu – ondragover
Sự kiện ondragover xác định nơi mà dữ liệu được thả sau khi kéo.
Theo mặc định, dữ liệu / phần tử không thể bị bỏ trong các phần tử khác. Để cho phép thả, chúng ta phải ngăn chặn 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 hành động thả – ondrop
Khi dữ liệu bị rớt xuống, một sự kiện thả xảy ra. Trong ví dụ sau, thuộc tính ondrop gọi hàm, thả (sự kiện):
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData(“text”);
ev.target.appendChild(document.getElementById(data));
}
Giải thích đoạn mã trên:
- Gọi preventDefault () để ngăn việc xử lý mặc định trình duyệt của dữ liệu (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 pháp này sẽ trả lại bất kỳ dữ liệu nào đã được thiết lập cho cùng một 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ả
- Học lập trình front-end cơ bản với bootstrap 4/html5/css3
- Học lập trình front-end nâng cao qua Project thực tế
- Học thiết kế web với Photoshop, CSS theo kiểu SASS
- Học cách sử dụng Git_hub cho lập trình viên
- Học lập trình Back-end PHP theo mô hình MVC cơ bản
- Học lập trình Back-end PHP theo mô hình MVC nâng cao
- Học lập trình Cơ sở dữ liệu với AngularJS
- Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
- Combo lập trình front-end từ cơ bản – nâng cao
- Combo lập trình back-end từ cơ bản đến nâng cao
- Combo lập trình web với word press từ A-Z
