Vào một ngày đẹp trời của những tháng dịch covid hoành hành khắp nơi trên mọi miền thế giới, một vị khách hàng “thân thiết” bảo với mình rằng họ muốn có một page trên trang web của họ có thể kéo thả các button có chứa dữ liệu để chèn vào một textarea đã được hiển thị nội dung sẵn để xuất ra file PDF. Và thế là phải làm thôi, vì khách hàng là thượng đế mà… Hùng hùng mấy ngày, tháng thì mình cũng tìm ra được một cách nhìn cũng đơn giản bằng việc tham khảo ở trang này HTML Drag and Drop API. Thôi không dài dòng nữa, code thôi nào!…
Bây giờ, các bạn tạo một file index.html và mở lên rồi code cùng mình nào!
Mình cũng đã code đến đâu chú thích đến đó, nên các bạn có thể chép về file index.html của các bạn và tham khảo nhá!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo HTML Drag & Drop API</title>
<!-- Thêm một chút css ở đây cho màu mè hoa lá hẹ -->
<style type="text/css">
#dataArea .button-draggable {
background-color: blue;
border: none;
border-radius: 4px;
padding: 15px 32px;
color: honeydew;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Khu vực dữ liệu</h1>
<!-- Tạo một khu vực để chứa những cái button hay dữ liệu mà mình muốn kéo thả, ở đây, mình dùng id để nói chỉ có một khu vực dữ liệu ở đây -->
<div id="dataArea"></div>
<br />
<!-- Đây là chỗ khu vực text area mà mình kéo dữ liệu vào đây -->
<textarea cols="150" rows="20">Xin chào thế giới! </textarea>
<!-- Mình sẽ viết java script ở đây -->
<script type="text/javascript">
// Ở đây mình sẽ dùng hàm addEventListener() trong javascript để thêm sự kiện kéo thả cho đối tượng HTML, trong trường hợp này là mấy cái button.
window.addEventListener("DOMContentLoaded", () => {
// Mình tạo một biến để lưu cách chuỗi html tạo ra, ở đây mình sẽ dùng vòng lặp để tạo ra 3 cái button chứa dữ liệu để kéo thả.
var html = "";
for (var i = 0; i < 3; i++) {
html +=
"<div id='Dữ liệu " +
(i + 1) +
"' class='button-draggable' draggable='true'>Dữ liệu " +
(i + 1) +
"</div> ";
}
// Tiếp theo mình dùng HTML DOM để lấy html nãy mình chạy vòng lặp vào đây để show ra màn hình website.
document.getElementById("dataArea").innerHTML = html;
// Tiếp theo mình dùng vòng một lần nữa và lại là HTML DOM để gán sự kiện kéo thả cho các button ở trên và gọi hàm dragstart_handler() để chèn dữ liệu.
// Tại sao mình dùng 2 vòng lặp phải không? Đó là vì nếu mình không tạo html ở trên thì ở đây mình sẽ getElementById() không thấy.
for (var i = 0; i < 3; i++) {
document
.getElementById("Dữ liệu " + (i + 1))
.addEventListener("dragstart", dragstart_handler);
}
});
// Đây là hàm để chuyển dữ liệu ta có trong button để chèn dữ liệu vào nơi mà ta kéo thả.
function dragstart_handler(ev) {
ev.dataTransfer.setData("text/plain", ev.target.id);
}
</script>
</body>
</html>
Sau khi xong thì chúng ta save file index.html lại và mở nó lên để chiêm ngưỡng kiệt tác của chúng ta há!
Bên trên là những gì mình nghiên cứu được cho việc kéo thả dữ liệu từ các button hay text vào trong một text area, mình biết các bạn sẽ có nhiều cách hay hơn và linh hoạt hơn, nhưng mình cũng hạn hẹp về kiến thức nên chỉ biết nhiêu đây, nên mong các cao nhân chém nhẹ tay nhé! Cám ơn các bạn đã theo dõi blog của mình, nếu mình có gì sai, mong các bạn đọc giả chỉ bạo ạ!
NAD's Blog 