HTML5 trække og slip

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: Alle elementer er trækkbare.

Browser-understøttelse

Tallene i tabellen indikerer den første browserversion, 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

Følgende 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 se lidt komplekst ud, men lad os undersøge alle forskellige dele af drag-and-drop-arrangementet.

Gør elementet trækkbart

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

<img draggable="true">

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

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

I det ovennævnte eksempel kalder ondragstart-attributten en drag(event) funktion, der definerer hvilke data der skal trækkes.

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

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

I dette eksempel er datatypen "text" og værdien er id'et for den trækkbare element ("drag1").

Where to drag to - 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()

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)
  • Get 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 placement 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