HTML5 Drag and Drop

Please drag the CodeW3C.com image into the rectangle.

Drag-and-drop

Drag-and-drop (Drag og Drop) er en meget almindelig funktion. Det betyder, at du kan gribe noget og trække det til en anden placering.

Drag-and-drop er en del af HTML5-standarden: Enhver element er trækbart.

Browser-understøttelse

Tallene i tabellen indikerer den første browser-version, der fuldt ud understøtter drag-and-drop.

API
Drag-and-drop 4.0 9.0 3.5 6.0 12.0

HTML drag-and-drop-eksempel

Her er et simpelt eksempel på drag-and-drop:

Eksempel

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

Try it yourself

Det kan måske se lidt komplekst ud, men lad os undersøge alle forskellige dele af drag-and-drop-hændelserne.

Gør elementet trækbart

Først: For at gøre et element trækbart, sæt draggable-attributten til true:

<img draggable="true">

Drag-and-drop-indhold - ondragstart og setData()

Herefter bestemmes, hvad der skal ske, når elementet trækkes.

I det ovenstående eksempel kaldes ondragstart-attributten en drag(event) funktion, der bestemmer hvilke data der skal trækkes.

dataTransfer.setData() metoden sætter datatypen og værdien for de trukne data:

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

I dette eksempel er datatypen "text" og værdien ID'en på dette trækbare element ("drag1").

Where to drag - 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 this default handling of elements.

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

event.preventDefault();

Performing placement - ondrop

A drop event occurs when the dragged data is released.

In the above example, the ondrop attribute calls a function, drop(event):

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

Code explanation:

  • 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)
  • Obtain the dragged data through the dataTransfer.getData() method. This method will return any data set to the same type in the setData() method
  • The dragged data is the id of the dragged element ("drag1")
  • Append the dragged element to the drop element

More examples

Drag and drop images

How to drag and drop an image between two <div> elements:

Please drag the CodeW3C.com image into the rectangle.

Try it yourself