HTML5 Drag and Drop. Asistență browser.

HTML5 Drag and Drop

Drag and drop este o caracteristică foarte comună. Este atunci când „apucați” un obiect și îl trageți într-o altă locație.
În HTML5, drag and drop face parte din standard: Orice element poate fi tras.

Asistență browser (Browser Support)

Numerele din tabel specifică prima versiune a browserului care acceptă complet Drag and Drop.

Exemplu de drag and drop HTML

Exemplul de mai jos este un exemplu de drag and drop simplu:

Exemplu:

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

Poate părea complicat, dar permite parcurgerea tuturor diferitelor părți ale unui eveniment de drag and drop.