Kéo thả là một phần trong chuẩn HTML5.
Kéo và thả
Kéo và thả là những tính năng rất phổ biến và là một phần trong chuẩn HTML5, bất kỳ thẻ nào cũng có thể kéo được.
Trình duyệt hỗ trợ
Số trong bảng dưới đây thể hiện phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho thuộc tính.
| Thuộc tính |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| Kéo - Thả | 4.0 | 3.5 | 9.0 | 6.0 | 12.0 |
Ví dụ về kéo – thả
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE HTML> <html> <head> <style> #div1 {width:200px;height:72px;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 logo WebVN vào hình chữ nhật bên dưới:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="https://webvn.com/wp-content/uploads/2014/10/wvnlogo.png" draggable="true" ondragstart="drag(event)" width="200" height="72"> </body> </html> |
Trông có vẻ phức tạm nhưng nó thể hiện rất đầy đủ từng phần của sự kiện kéo thả.
Làm cho một thẻ có thể kéo
Đây chính là bước đầu tiên của sự kiện kéo thả: làm cho một thẻ có thể kéo đi được bằng cách đặt thuộc tính draggable là true:
|
1 |
<img draggable="true"> |
Dữ liệu gì được Kéo đi? – ondragstart and setData()
Đây chính là bước thứ 2 : Điều gì sẽ xảy ra khi một thẻ được kéo đi?
Trong ví dụ ở trên, thuộc tính ondragstart gọi tới một hàm là drag(event), hàm này quy định dữ liệu gì đượ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:
|
1 2 3 |
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 thẻ (“drag1”).
Thả ở đâu? – ondragover
Sự kiện ondragover quy định khu vực nào dữ liệu được phép thả xuống.
Theo mặc định, dự liệu/thẻ không thể thả trong các thành phần khác của trang. Để cho phép đối tượng được thả xuống, chúng ta sẽ phải thay đổi mặc định của thẻ bằng cách gọi phương thức event.preventDefault() cho sự kiện ondragover:
|
1 |
event.preventDefault() |
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 một hàm là drop(event):
|
1 2 3 4 5 |
function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } |
Giải thích về đoạn JavaScript trên:
- 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ả ảnh qua lại giữa 2 thẻ
Trong ví dụ này chúng ta sẽ học cách để thực hiện việc kéo – thả ảnh qua lại giữa 2 thẻ div.
Bài viết rất hay, cảm ơn bạn, hi vọng bạn sẽ còn viết thêm nhiều bài như thế này nữa. ^_^
Cũng kéo thả nhưng tình huốnng này khác. Mình muốn hình ảnh được kéo thả khắp nơi trên màn hình (trong thẻ body) thì làm thế nào?
Bạn sử dụng thuộc tính ondrop và ondragover cho thẻ body nhé 🙂
Ad cho mình hỏi, ví dụ trong div mà dữ liệu được thả xuống đã chứa sẵn một thẻ khác (vd: thẻ img) thì có replace thẻ có sẵn không? Mình muốn nó replace mà không biết làm thế nào?
Bài Viết Hay, Thank