Link Demo
Kéo thả là một tính năng rất phổ biến, đó là khi ta nắm một đối tượng ở vùng này thả sang vùng khác. Trong HTML5, kéo và thả là một phần tiêu chuẩn, tất cả các phần tử đều có thể nắm và kéo.
Ví dụ
<!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)” width=”336″ height=”69″> </body> </html>
Thao tác:
Nắm và kéo
Thả vào phần đóng khung
Cách làm cho một phần tử kéo được, thêm thuộc tính draggable=”true”:
<img draggable="true">
Theo khoapham.vn