HTML5 的 draggable 属性允许您使元素可拖动。然而，draggable 属性本身并不提供拖动后放置的功能。您需要使用 JavaScript 来处理拖动事件。
以下是一个简单的例子，展示了如何使元素可拖动，并且能够在页面上任意拖动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Draggable Element</title>
<style>
#draggable {
width: 100px;
height: 100px;
background: red;
color: white;
text-align: center;
line-height: 100px;
border: 2px dashed black;
cursor: move;
}
</style>
</head>
<body>
<div id="draggable" draggable="true">Drag me!</div>
<script>
// 获取可拖动元素
var dragItem = document.getElementById('draggable');
// 监听拖动开始事件
dragItem.addEventListener('dragstart', function(event) {
// 设置数据类型和值
event.dataTransfer.setData('text/plain', 'draggedItem');
});
// 监听拖动结束事件
dragItem.addEventListener('dragend', function(event) {
// 可以在这里执行操作，比如更新应用状态
});
// 为页面添加拖动over和drop事件
document.addEventListener('dragover', function(event) {
event.preventDefault(); // 阻止默认行为
});
document.addEventListener('drop', function(event) {
event.preventDefault(); // 阻止默认行为
// 获取被拖动的元素
var draggedItem = document.getElementById(event.dataTransfer.getData('text/plain'));
// 如果元素存在，将其添加到放置目标
if (draggedItem) {
draggedItem.style.position = 'relative';
draggedItem.style.left = event.clientX - draggedItem.offsetWidth / 2 + 'px';
draggedItem.style.top = event.clientY - draggedItem.offsetHeight / 2 + 'px';
}
});
</script>
</body>
</html>在这个例子中，draggable 属性被用于使元素可拖动。dragstart 和 dragend 事件用于处理拖动的开始和结束。dragover 和 drop 事件用于处理拖动过程中的元素放置。通过 JavaScript，我们在 drop 事件中更新了元素的位置，使其能够在页面上任意拖动。