Kéo và thả (DnD) là khái niệm Giao diện người dùng mạnh mẽ giúp dễ dàng sao chép, sắp xếp lại và xóa các mục với sự trợ giúp của các cú nhấp chuột. Điều này cho phép người dùng nhấp và giữ nút chuột trên một phần tử, kéo phần tử đó đến vị trí khác và thả nút chuột để thả phần tử đó vào đó.
Để kéo và thả:
<!DOCTYPE HTML>
<html>
<head>
<style>
#boxA, #boxB {float:left;padding:10px;margin:10px; -moz-user-select:none;}
#boxA { background-color: #6633FF; width:75px; height:75px; }
#boxB { background-color: #FF6699; width:150px; height:150px; }
</style>
<script>
function dragStart(ev) {
ev.dataTransfer.effectAllowed='move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
</script>
</head>
<body>
<center>
<h2>Drag and drop HTML5 demo</h2>
<div>Try to drag the purple box around.</div>
<div id = "boxA" draggable = "true"
ondragstart = "return dragStart(ev)">
<p>Drag Me</p>
</div>
<div id = "boxB">Dustbin</div>
</center>
</body>
</html>