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ệtCác số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ kéo và thả.
| API | | | | | |
|---|
| Kéo và thả | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Ví dụ kéo và thả HTMLVí dụ dưới đây là một ví dụ kéo và thả đơn giản: Thí dụKéo hình ảnh W3Schools vào hình chữ nhật.
Hỗ trợ trình duyệt 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 đủ kéo và thả.
API Kéo và thả
Ví dụ kéo và thả HTMLVí dụ dưới đây là một ví dụ kéo và thả đơn giản:
hàm cho phépDrop (ev) {& nbsp; & nbsp; ev.preventDefault (); } chức năng kéo (eV) {& nbsp; ev.datatransfer.setData ("văn bản", ev.target.id); } chức năng thả (ev) {& nbsp; ev.preventdefault (); & nbsp; & nbsp; var data = ev.datatransfer.getdata ("văn bản"); & nbsp; & nbsp; ev.target.appendchild (document.getEuityById (dữ liệu)); } The dataTransfer.setData() method sets the data type and the value of the dragged data: function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
} Hãy tự mình thử »
Nó có vẻ phức tạp, nhưng hãy trải 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
Trước hết: Để tạo một phần tử có thể kéo, hãy đặt thuộc tính draggable thành true: Những gì để kéo - OnDragStart và SetData ()
Sau đó, chỉ định những gì sẽ xảy ra khi phần tử bị kéo.Trong ví dụ trên, thuộc tính ondragstart gọi hàm, kéo (sự kiện), chỉ định dữ liệu nào được kéo. Phương thức dataTransfer.setData() đặt kiểu dữ liệu và giá trị của dữ liệu bị kéo: chức năng kéo (eV) {& nbsp; ev.datatransfer.setData ("văn bản", ev.target.id); }
ev.preventDefault();
var data =
ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
} 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"). - Dùng ở đâu - Ondragover
- Sự kiện
ondragover chỉ định nơi có thể loại bỏ dữ liệu kéo. - Theo mặc định, dữ liệu/phần tử không thể được loại bỏ trong các yếu tố khác. Để cho phép giảm, chúng ta phải ngăn chặ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
<img draggable="true">
0 cho sự kiện Ondragover:
Làm giảm - ondropThí dụKhi dữ liệu kéo bị rơi, một sự kiện thả xảy ra. API
Bài học hôm nay sẽ giúp các bạn có thể thực thi việc kéo/ thả trong HTML5. Ví dụ dưới minh họa cho việc kéo thả. Bạn có thể kéo logo từ hình chữ nhật bên trên xuống hình chữ nhật bên dưới.
Nội dung - Kéo/Thả trong HTML5
- Trình duyệt hỗ trợ
- Ví dụ cụ thể về việc kéo/ thả:
- Phần tử Draggable
- Dữ liệu gì sẽ được kéo đi – ondragstart và setData()
- Dữ liệu sau khi kéo sẽ được thả ở đâu? – ondragover
- Thả – ondrop
- Ví dụ bổ sung
Kéo/Thả trong HTML5Trình duyệt hỗ trợ Ví dụ cụ thể về việc kéo/ thả:
Trình duyệt hỗ trợVí dụ cụ thể về việc kéo/ thả:
| Phần tử Draggable | | | | | |
|---|
| Dữ liệu gì sẽ được kéo đi – ondragstart và setData() | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Ví dụ cụ thể về việc kéo/ thả:
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</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>
<p>Kéo ảnh logo TimODay vào hình chữ nhật:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
Phần tử Draggable
Phần tử DraggableDữ liệu gì sẽ được kéo đi – ondragstart và setData() <img draggable="true">
Dữ liệu gì sẽ được kéo đi – ondragstart và setData()Kéo và thả là một tính năng rất phổ biến. Bạn có thể chọn một đối tượng và di chuyển nó đến một vị trí khác. Trong HTML5, kéo/thả là một phần của chuẩn: bất cứ phần tử nào cũng có thể thực hiện việc kéo thả. Bảng dưới đây là một số phiên bản trình duyệt đầu tiên hỗ trợ việc kéo/ thả trong HTML5 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ị id của thẻ là (“drag1”).
Dữ liệu sau khi kéo sẽ được thả ở đâu? – ondragoverSự kiện ondragover chỉ định nơi dữ liệu được thả xuống. Theo mặc định, dự liệu/các phần tử không thể được thả vào các thành phần khác của trang. Để cho thả xuống, chúng ta sẽ phải thay đổi mặc định của phần tử bằng cách gọi phương thức event.preventDefault() cho sự kiện ondragover: event.preventDefault()
Thả – ondropKhi người dùng thả đối tượng, sự kiện thả sẽ được kích hoạt. 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));
}
Giải thích ví dụ: - Gọi phương thức preventDefault() để thay đổi cách xử lý mặc định của trình duyệt đối với dữ liệu (mặc định trình duyệt sẽ mở liên kết tới dữ liệu)
- Lấy dữ liệu vừa được thả xuống bằng phương thức dataTransfer.getData(). Phương thức này sẽ trả về kiểu dữ liệu giống như kiểu đã được đặt trong phương thức setData()
- Ở đây dữ liệu được thả xuống là id của thẻ (“drag1”)
- Chèn thẻ được kéo vào bên trong thẻ được thả
Ví dụ bổ sungKéo thả hình ảnh qua lạiTrong ví dụ này chúng ta sẽ cải tiến đề thực hiện việc kéo – thả ảnh qua lại giữa 2 thẻ div.Ví dụ:
Ví dụ:
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2 {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
</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>
<h2>Kéo và thả</h2>
<p>Kéo ảnh trở lại giữa hai phần tử.</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="img_logo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
| 
