agounaris/jquery_drop_events.html

## jquery_drop_events.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS Drop Events</title>
        <style media="screen">
        .dropzone{
            width:300px;
            height:100px;
            line-height:100px;
            border:2px dashed #CCC;
            text-align:center;
        }
        </style>
    </head>
    <body>
        <div class="dropzone">Drop here</div>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript">
        var dropZone = $('.dropzone');

        dropZone.on('dragover', function(e) {
                e.preventDefault();
                e.stopPropagation();
        });

        dropZone.on('dragenter', function(e) {
                e.preventDefault();
                e.stopPropagation();
        });

        dropZone.on('drop', function(e){
            if(e.originalEvent.dataTransfer){
                if(e.originalEvent.dataTransfer.files.length) {
                    e.preventDefault();
                    e.stopPropagation();

                    var files = e.originalEvent.dataTransfer.files;

                    console.log('Do something with the files');
                    console.log(files);
                }
            }
        });
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Drop Events</title>
	<style media="screen">
	.dropzone{
	width:300px;
	height:100px;
	line-height:100px;
	border:2px dashed #CCC;
	text-align:center;
	}
	</style>
	</head>
	<body>
	<div class="dropzone">Drop here</div>

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript">
	var dropZone = $('.dropzone');

	dropZone.on('dragover', function(e) {
	e.preventDefault();
	e.stopPropagation();
	});

	dropZone.on('dragenter', function(e) {
	e.preventDefault();
	e.stopPropagation();
	});

	dropZone.on('drop', function(e){
	if(e.originalEvent.dataTransfer){
	if(e.originalEvent.dataTransfer.files.length) {
	e.preventDefault();
	e.stopPropagation();

	var files = e.originalEvent.dataTransfer.files;

	console.log('Do something with the files');
	console.log(files);
	}
	}
	});
	</script>
	</body>
	</html>