NỘI DUNG BÀI VIẾT
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.
Kéo/thả trong HTML5
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ả.
Ví dụ cụ thể về việc kéo/thả trong HTML
Kéo ảnh logo hocjavascript.net vào hình chữ nhật:
<!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 hocjavascript.net vào hình chữ nhật:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="https://i2.wp.com/hocjavascript.net/wp-content/uploads/2020/08/cropped-H%E1%BB%8Dc-JavaScript-2.jpg?w=383&ssl=1" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>Code language: HTML, XML (xml)Trông có vẻ rất phức tạp nhưng nó thể hiện rất đầy đủ từng phần của việc kéo/ thả.
Phần tử Draggable
Đầu tiên: để một phần tử có thể kéo được cần thiết lập thuộc tính draggable của phần tử thành “True”:
<img draggable="true">
Code language: HTML, XML (xml)Dữ liệu gì sẽ được kéo đi – ondragstart và setData()
Sau đó cần chỉ định điều gì sẽ xảy ra khi một phần tử được kéo đi?
Trong ví dụ ở trên, thuộc tính ondragstart gọi hàm drag(event), hàm này quy định dữ liệu được kéo đi.
Phương thức dataTransfer.setData() cho phép chúng ta đặt kiểu dữ liệu và giá trị của thẻ được kéo:
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}Code language: JavaScript (javascript)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? – ondragover
Sự 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()
Code language: CSS (css)Thả – ondrop
Khi 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));
}Code language: JavaScript (javascript)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ổ sung
Kéo thả hình ảnh qua lại
Trong 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ụ:
<!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="https://codegym.vn/wp-content/uploads/2019/02/Logo.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>Code language: HTML, XML (xml)Kết luận
Qua đây là một số chia sẻ về Kéo/thả trong HTML, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML.
Các bạn có thể tham khảo các bài viết hay về HTML tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
