HTML5 Slepen en Neerzetten

Sleep het CodeW3C.com afbeelding naar het rechthoekige gebied.

Sleep-en-neerzetten

Sleep-en-neerzetten (Drag en Drop) is een zeer gebruikelijke functie. Het verwijst naar het grijpen van iets en het naar een andere locatie slepen.

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

Browserondersteuning

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

API
Sleep-en-neerzetten 4.0 9.0 3.5 6.0 12.0

HTML sleep-en-neerzetten voorbeeld

Hier is een eenvoudig voorbeeld over sleep-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>

Probeer het zelf

Het kan misschien wat complex lijken, maar laten we alle verschillende delen van het sleep-en-neerzetten even onderzoeken.

Stel het element in als sleepbaar

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

<img draggable="true">

Sleep-en-neerzetten van 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 gegevens worden gesleept.

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

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

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

Where to drop - ondragover

The ondragover event specifies where the draggable data can be placed.

By default, data/elements cannot be placed within other elements. To implement drag and drop, we must prevent the element from handling this default behavior.

This task is completed by the event.preventDefault() method of the ondragover event:

event.preventDefault()

Plaatsen - ondrop

When the dragged data is released, a drop event occurs.

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));
}

Code uitleg:

  • Call preventDefault() to prevent the browser's default handling of the data (the default behavior of the drop event is to open as a link)
  • Obtaining the dragged data through the dataTransfer.getData() method. This method will return any data set of the same type in the setData() method
  • De gedragende gegevens zijn de id van het gedragende element ("drag1")
  • Voeg het gedrag dat wordt gedragen toe aan het element dat wordt geplaatst

Meer voorbeelden

Beelden heen en weer slepen

Hoe beelden heen en weer te slepen tussen twee <div>-elementen:

Sleep het CodeW3C.com afbeelding naar het rechthoekige gebied.

Probeer het zelf