Zum Testen von Drag & Drop einfach Sachen in die Box ziehen. Die verschiedenen Types werden angezeigt

Hier her droppen

Beispiel: Das hier draggen

Code:
Javascript ohne jQuery ecc:
<div style="width:100%;height:400px;border: 2px dotted black;" id="ta">
<div style="padding-top:3em;text-align:center;width:100%;">Hier her droppen</div>
</div>

<br>
Beispiel: <span style="color:red;" draggable="true" id="youtube">Das hier draggen</span>

<script>
function drop(e) {
  if (e.stopPropagation) {
    e.stopPropagation();
  }

  var html = "";
  for (var i = 0; i < e.dataTransfer.types.length; i++) {
      html += e.dataTransfer.types[i] + ": " +  e.dataTransfer.getData(e.dataTransfer.types[i]) + "\n";
  }

  this.innerHTML = html;
  return false;
}
function allowdrop(e) {
  e.preventDefault();
}

function drag(e) {
  e.dataTransfer.setData("text/html", '<iframe width="560" height="315" src="https://www.youtube.com/embed/-dVa7ooLRhc" frameborder="0" allowfullscreen></iframe>');
  return true;
}

document.getElementById("ta").addEventListener("drop", drop, false);
document.getElementById("ta").addEventListener("dragover", allowdrop, false);
document.getElementById("youtube").addEventListener("dragstart", drag, false);

</script>