JavaScript/DOM/Event/drag

var dragged;
/* events fired on the draggable target */
document.addEventListener("drag", function(event) {
}, false);
document.addEventListener("dragstart", function(event) {
 // store a ref. on the dragged elem
 dragged = event.target;
 // make it half transparent
 event.target.style.opacity = .5;
}, false);
document.addEventListener("dragend", function(event) {
 // reset the transparency
 event.target.style.opacity = "";
}, false);
/* events fired on the drop targets */
document.addEventListener("dragover", function(event) {
 // prevent default to allow drop
 event.preventDefault();
}, false);
document.addEventListener("dragenter", function(event) {
 // highlight potential drop target when the draggable element enters it
 if (event.target.className == "dropzone") {
 event.target.style.background = "purple";
 }
}, false);
document.addEventListener("dragleave", function(event) {
 // reset background of potential drop target when the draggable element leaves it
 if (event.target.className == "dropzone") {
 event.target.style.background = "";
 }
}, false);

• Animations-Events
• Datenabruf-Events
• Drag & Drop-Events
  • dragstart
  • drag
  • dragend
  • dragenter
  • dragleave
  • dragover
  • drop
• Druck-Events
• Formular-Events
• Maus, Touch und Pointer-Events
• Medien-Events
• Tastatur-Events
• Window-Events
• Zwischenablage-Events