HTML5 Slepen en Neerzetten

Sleep het CodeW3C.com afbeelding naar het rechthoekig gebied.

Sleep en Plaats

Sleep en Plaats (Drag en Drop) is een zeer gebruikelijke functie. Het verwijst naar het vangen van iets en het naar een andere positie slepen.

Sleep en Plaats is een onderdeel van de HTML5 standaard: elk element is instelbaar voor sleep.

Browserondersteuning

De cijfers in de tabel wijzen op de eerste browserversie die sleep en plaats volledig ondersteunt.

API
Sleep en Plaats 4.0 9.0 3.5 6.0 12.0

HTML Sleep en Plaats Voorbeeld

Hier is een eenvoudig voorbeeld over sleep en plaats:

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>

Probeer het zelf

Het kan misschien wat complex lijken, maar laten we de verschillende delen van het sleep-en-place even doornemen.

Maak element instelbaar voor sleep

Eerst: om een element instelbaar voor sleep te maken, stel de eigenschap draggable in op true:

<img draggable="true">

Sleep en plaats inhoud - ondragstart en setData()

Vervolgens wordt bepaald wat er gebeurt wanneer het element wordt gesleept.

In het bovenstaande voorbeeld wordt de eigenschap ondragstart aangeroepen door een drag(event) functie, die bepaalt welke data geduwd moeten worden.

De methode dataTransfer.setData() stelt het datatype en de waarde van het sleepbare data in:

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

In dit voorbeeld is het datatype "text" en de waarde de id van dit sleepbare element ("drag1").

Waar naartoe slepen - ondragover

Het ondragover-event bepaalt waar de gedragselementen kunnen worden geplaatst.

Standaard kan data/elementen niet worden geplaatst in andere elementen. Om drag-and-drop te implementeren, moeten we dit standaard gedrag van de elementen voorkomen.

Deze taak wordt uitgevoerd door de methode event.preventDefault() van het ondragover-event:

event.preventDefault()

Plaatsen - ondrop

Wanneer je de gedragselementen loslaat, wordt het drop-event geactiveerd.

In het bovenstaande voorbeeld wordt de ondrop-eigenschap aangeroepen door een functie, drop(event):

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

Codeverklaring:

  • Roep preventDefault() aan om de standaardbrowserverwerking van de data te voorkomen (de standaardgedraging van het drop-event is het openen van de link)
  • Verkrijg de gedragselementen door het gebruik van de methode dataTransfer.getData(). Deze methode zal elke data retourneren die is ingesteld met dezelfde type in de setData() methode
  • De gedragselementen zijn de id's van de gedragselementen ("drag1")
  • Voeg de gedragselementen toe aan het element waarop je de drag-and-drop actie hebt uitgevoerd

Meer voorbeelden

Afbeeldingen heen en weer slepen

Hoe kun je een afbeelding heen en weer slepen tussen twee <div>-elementen:

Sleep het CodeW3C.com afbeelding naar het rechthoekig gebied.

Probeer het zelf