diff --git a/index.html b/index.html index ca86cf2..cfdc4c5 100644 --- a/index.html +++ b/index.html @@ -6,19 +6,25 @@ SheetJS Live Demo @@ -35,8 +41,7 @@ Output Format:
-
Drop a spreadsheet file here to see sheet data
- ... or click here to select a file +
@@ -46,6 +51,10 @@ Use readAsBinaryString: (when available) 

 

+

+	
+	
Drop a spreadsheet file here to see sheet data

+

 

 
 
@@ -192,12 +201,11 @@ var do_file = (function() {
 })();
 
 (function() {
-	var drop = document.getElementById('drop');
-	if(!drop.addEventListener) return;
+	var dropZone = document.getElementById('drop-zone')
+	if(!dropZone.addEventListener && !window.addEventListener) return;
 
 	function handleDrop(e) {
-		e.stopPropagation();
-		e.preventDefault();
+		dropZoneDisplay(e, false);
 		do_file(e.dataTransfer.files);
 	}
 
@@ -207,9 +215,26 @@ var do_file = (function() {
 		e.dataTransfer.dropEffect = 'copy';
 	}
 
-	drop.addEventListener('dragenter', handleDragover, false);
-	drop.addEventListener('dragover', handleDragover, false);
-	drop.addEventListener('drop', handleDrop, false);
+	function dropZoneDisplay(e, show){
+		e.stopPropagation();
+		e.preventDefault();
+
+		var opacity = show ? '1' : '0';
+		var zIndex  = show ? '1' : '-1';
+
+		dropZone.style.opacity = opacity;
+		dropZone.style.zIndex = zIndex;
+	}
+
+	window.addEventListener('drop' , handleDrop)
+	window.addEventListener('dragover' , handleDragover)
+	window.addEventListener('dragenter' , function(e){
+		dropZoneDisplay(e, true);
+	})
+
+	dropZone.addEventListener('dragleave' , function(e){
+		dropZoneDisplay(e, false);
+	})
 })();
 
 (function() {