Drag and Drop test

by Jayson Buquia

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div id="dropArea"></div>

CSS

#dropArea {
  width: 300px;
  height: 300px;
  background: silver;
}

#dropArea.dragOver {
  background: green;
}

JavaScript

var d = document.getElementById('dropArea'),
		images = document.getElementById('images'),
		hasdnd = Modernizr.draganddrop ? true : false;
    
if ( !hasdnd ) {
	console.warn('HTML5 Drag and Drop not suopported. Sarreh.');
  return;
}

d.addEventListener('dragover',function(e){
	console.log('dragover',e);
  e.preventDefault();
  d.classList.add('dragOver');
  return false;
},false);

d.addEventListener('dragenter',function(e){
	console.log('dragenter',e);
  e.preventDefault();
  return false;
},false);

d.addEventListener('drop dragend dragleave',function(){
	e.preventDefault();
  d.classList.remove('dragOver');
},false);

d.addEventListener('drop',function(e){
	e.preventDefault();
  var imgElems = [].map.call(e.dataTransfer.files,function(file){
  	var img = new Image();
    img.src = URL.createObjectURL(file);
  	return img;
  });
  var newWindow = window.open('','your_images','width=500,height=300');
  var b = newWindow.document.body;
   	var title = newWindow.document.createElement('h3'),
    		imgParent = newWindow.document.createElement('div');
      title.innerHTML = 'Your Images:';
     imgElems.forEach(function(img){
	     	imgParent.appendChild(img);     
     });
     b.appendChild(title).appendChild(imgParent);
  return false;
},false);