Drag n drop

Drag n drop

Attribut i HTML

draggable="true"

Events

  • dragstart
  • drag
  • dragenter
  • dragleave
  • dragover
  • drop
  • dragend

Exempel

  • Exempel på bild som använder srcset

HTML

<ul> <li ondrop="drop(event)" ondragover="allowDrop(event)"></li> <li ondrop="drop(event)" ondragover="allowDrop(event)"></li> <li ondrop="drop(event)" ondragover="allowDrop(event)"></li> <li ondrop="drop(event)" ondragover="allowDrop(event)"></li> </ul> <img src="image.png" draggable="true" id="drag" ondragstart="drag(event)">

CSS

ul { display: flex; list-style: none; margin: 0; padding: 0; } li { flex: 1; border: 1px solid #000; padding-bottom: 25%; position: relative; width: 25%; } img { border: 0; position: absolute; width: 100%; } [draggable] { cursor: grab; } [draggable]:active { cursor: grabbing; }

Javascript

function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); }

Programmeringsspråk

Dropbox logotyp

Kuriosa

Liknande namn

AirDrop logotyp AirDrop logotyp

Externa länkar

Fönster i Internet explorer som frågar om webbsidan får klistra in Dragkrok Dragskåp