Cacher is the code snippet organizer for pro developers

<!-- Native Drag and drop with file api -->

Drag and Drop Events include
ondragstart – user starts dragging the element
ondragend – the user stops dragging the element
ondragenter – element being moved is moved into a drop listener
ondragover – user drags an element over a drop listener
ondragleave – user drags an element out of drop listener
ondrop – user successfuly drops an element into a drop listener
ondrag – fires constantly while an element is being dragged but can only give the x and y coordinates of the mouse
JavaScript

It's easy to make DOM elements draggable/droppable.
$("img").attr('draggable','true);
// this sets all the image elements to draggable
 
$("#dropZone").bind("dragover", function() { 
if(event.preventDefault) event.preventDefault();
return false;
});
 
$("#dropZone").bind("dragenter", function() { 
$(this).addClass("hover");
if(event.preventDefault) event.preventDefault();
return false;
});
 
$("#dropZone").bind("dragleave", function() { 
$(this).removeClass("hover");
if(event.preventDefault) event.preventDefault();
return false;
});
 
$("#dropZone").bind("drop", function() { 
var data = event.originalEvent.dataTransfer;
var src = ( data.getData('Text') );
var img = $("<img></img>").attr("src", src);
$(this).html(img);
 
if(event.preventDefault) event.preventDefault();
return false;
});
 
$("#dropZone").bind("dropstart", function() { 
var data = event.originalEvent.dataTransfer;
var src = $(this).attr("data-xxx");
data.setData("Text", src);
return true;
});