Arrastar e soltar (drag and drop) é uma funcionalidade poderosa em HTML5 que permite que os usuários interajam com elementos da página movendo-os de um local para outro. Abaixo estão alguns exemplos básicos de como implementar o recurso de arrastar e soltar em HTML5:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#dragElement {
width: 100px;
height: 100px;
background-color: #3498db;
color: #fff;
text-align: center;
line-height: 100px;
cursor: move;
}
</style>
</head>
<body>
<div id="dragElement" draggable="true" ondragstart="drag(event)">Arraste-me</div>
<script>
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
</script>
</body>
</html>
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#dragElement {
width: 100px;
height: 100px;
background-color: #3498db;
color: #fff;
text-align: center;
line-height: 100px;
cursor: move;
}
#dropArea {
width: 200px;
height: 200px;
border: 2px dashed #ccc;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="dragElement" draggable="true" ondragstart="drag(event)">Arraste-me</div>
<div id="dropArea" ondrop="drop(event)" ondragover="allowDrop(event)">Solte aqui</div>
<script>
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function allowDrop(ev) {
ev.preventDefault();
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var draggedElement = document.getElementById(data);
ev.target.appendChild(draggedElement);
}
</script>
</body>
</html>
Esses são exemplos básicos para começar. No primeiro exemplo, você tem um elemento que pode ser arrastado (draggable="true") e um evento de drag que define os dados a serem transferidos durante o arrastar. No segundo exemplo, há uma área de destino (#dropArea) onde você pode soltar o elemento arrastado, com eventos ondragover e ondrop para permitir a queda.