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
