<html>
	<head>
		<script src="js/jquery-2.1.1.min.js"></script>
		<style>
			
			.dropzone {
				border : 1px dotted black;
				width: 400px;
				height: 400px;
				display: block;
			}
			
			.dropzone.act {
				border: 1px solid green;
			}
			
		</style>
	</head>
	<body>
		<div class="dropzone">Перетащите файлы сюда</div>
		<script>
			
			if(typeof(FormData) !== 'undefined') {
				
				$(document).on('dragover dragleave drop', '.dropzone', function(e) {
					var _this = $(this);
					var form_data = null;
					
					e.preventDefault();
					e.stopPropagation();
					switch(e.type) {
						case 'dragover' :
							_this.addClass('act');
							break;
						case 'drop' :
							form_data = new FormData();
							$.each(e.originalEvent.dataTransfer.files, function(k, file) {
								form_data.append("files[]", file);
							});
							$.ajax({
								url: '/index.php',
								data: form_data,
								dataType : 'text',
								processData: false,
								contentType: false,
								type: 'POST',
								success: function(data){
									console.log(data);
								}
							});
						case 'dragleave' :
							_this.removeClass('act');
							break;
					}
				});
			
			} else {
				
				alert("Upload via drag-n-drop not supported");
				
			}
			
		</script>
	</body>
</html>

На что нужно обратить внимание:

все события (dragover, dragleave, drop) нужно останавливать и переопределять дефолтное поведение (preventDefault, stopPropagation)
"класс" FormData должен существовать (IE 10+)