HTML5-drag and drop

Dra CodeW3C.com-bilden till rektangeln.

Drag and drop

Drag and drop (Drag och Drop) är en mycket vanlig funktion. Det innebär att du greppar något och drar det till en annan plats.

Drag and drop är en del av HTML5-standarden: alla element är dragbara.

Webbläsarsupport

Tal i tabellen indikerar den första webbläsarens version som helt stöder drag and drop.

API
Drag and drop 4.0 9.0 3.5 6.0 12.0

HTML drag and drop-exempel

Följande är ett enkelt exempel på drag and drop:

Exempel

<!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>

Prova själv

Det kan verka lite komplext, men låt oss undersöka alla olika delar av drag and drop-händelserna.

Sätt elementet som dragbart

Först: För att sätta ett element som dragbart, sätt draggable-egenskapen till true:

<img draggable="true">

Innehåll för drag och släpp - ondragstart och setData()

Sedan specificeras vad som ska hända när elementet dras.

I det tidigare exemplet anropar ondragstart-attributet en drag(event)-funktion som specificerar vilka data som ska dras.

dataTransfer.setData() metoden sätter innehållets datatyp och värde för den dragbara datan:

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

I detta exempel är datatypen "text" och värdet ID:n för den dragbara elementen ("drag1").

Placera var - ondragover

Ondragover-evenemanget definierar var den dragbara datan kan placeras.

Som standard kan data/element inte placeras i andra element. För att möjliggöra drag and drop måste vi förhindra denna standardhantering av elementen.

Denna uppgift utförs av metoden event.preventDefault() för ondragover-evenemanget:

event.preventDefault()

Placera - ondrop

En drop-event sker när den dragbara datan släpps.

I föregående exempel anropas ondrop-attributet en funktion, drop(event):

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

Kodförklaring:

  • Anropa preventDefault() för att förhindra standardhanteringen av datan av webbläsaren (drop-evenemanget har som standard att öppna som länk)
  • Få tag på den dragbara datan genom att använda metoden dataTransfer.getData(). Denna metod returnerar alla data som har satts till samma typ i setData() metoden
  • Den dragbara datan är den dragbara elementets id ("drag1")
  • Lägg till den dragbara elementet till det placerade elementet

Mer exempel

Skjuta runt bilder

Hur man skjuter runt bilderna mellan två <div>-element:

Dra CodeW3C.com-bilden till rektangeln.

Prova själv