API voor slepen en neerzetten in HTML
In HTML kan elk element worden gesleept en neergezet.
Voorbeeld
Sleep de W3Schools-afbeelding naar de rechthoek.
Slepen en neerzetten
Slepen en neerzetten is een veel voorkomende functie. Het is wanneer u een object "pakt" en naar een andere locatie sleept.
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die Drag and Drop volledig ondersteunt.
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
HTML-voorbeeld voor slepen en neerzetten
Het onderstaande voorbeeld is een eenvoudig voorbeeld van slepen en neerzetten:
Voorbeeld
<!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>
Het lijkt misschien ingewikkeld, maar laten we alle verschillende onderdelen van een drag-and-drop-evenement eens doornemen.
Een element versleepbaar maken
Allereerst: om een element versleepbaar te maken, stelt u het draggableattribuut in op true:
<img draggable="true">
Wat te slepen - ondragstart en setData()
Geef vervolgens op wat er moet gebeuren als het element wordt versleept.
In het bovenstaande voorbeeld ondragstartroept het attribuut een functie aan, drag(event), die specificeert welke gegevens moeten worden gesleept.
De dataTransfer.setData()methode stelt het gegevenstype en de waarde van de versleepte gegevens in:
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
In dit geval is het gegevenstype "tekst" en is de waarde de id van het versleepbare element ("drag1").
Waar te laten vallen - ondragover
De ondragovergebeurtenis geeft aan waar de gesleepte gegevens kunnen worden neergezet.
Standaard kunnen gegevens/elementen niet in andere elementen worden neergezet. Om een drop toe te staan, moeten we de standaard afhandeling van het element voorkomen.
Dit wordt gedaan door de event.preventDefault()methode voor de ondragover-gebeurtenis aan te roepen:
event.preventDefault()
Doe de druppel - ondrop
Wanneer de gesleepte gegevens worden neergezet, vindt er een drop-gebeurtenis plaats.
In het bovenstaande voorbeeld roept het attribuut ondrop een functie aan, drop(event):
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
Code uitgelegd:
- Roep preventDefault() aan om te voorkomen dat de browser standaard met de gegevens omgaat (standaard is open als link bij neerzetten)
- Haal de gesleepte gegevens op met de methode dataTransfer.getData(). Deze methode retourneert alle gegevens die op hetzelfde type waren ingesteld in de methode setData()
- De versleepte gegevens zijn de id van het versleepte element ("drag1")
- Voeg het gesleepte element toe aan het drop-element
Meer voorbeelden
Voorbeeld
Een afbeelding heen en weer slepen (en neerzetten) tussen twee <div>-elementen: