felixrieseberg/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Hello World!</title>
  <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
	 crossorigin="anonymous"></script>
</head>
<style>
	/*universal styling*/

	html {
		font-size: 10px;
	}

	body {
		font-family: Arial, sans-serif;
		font-style: normal;
		font-size: 1.5rem;
		line-height: 1.5rem;
		padding: 0 20px;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-weight: 600;
		line-height: 1.4;
		margin: 1.5rem 0rem;
	}

	h1 {
		font-size: 2.8rem;
		margin: 0;
	}

	h2 {
		font-size: 2.8rem;
		margin: 2.1rem 0rem;
	}

	h3 {
		font-size: 2.1rem;
		margin: 1.57rem 0rem;
	}

	h4 {
		font-size: 1.4rem;
		margin: 0;
	}

	h5 {
		font-size: 1.3rem;
	}

	h6 {
		font-size: 1.0rem;
	}

	p {
		margin: 0rem 0rem 2.4rem 0rem;
		line-height: 150%;
	}

	ul,
	ol {
		margin-left: 25px;
		margin-bottom: 15px;
		line-height: 150%;
	}

	/*clearfixes*/

	.cf:before,
	.cf:after {
		content: " ";
		display: table;
	}

	.cf:after {
		clear: both;
	}

	*,
	*:before,
	*:after {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	article,
	aside,
	details,
	figcaption,
	figure,
	footer,
	header,
	hgroup,
	menu,
	nav,
	section,
	div {
		margin: 1.5rem 0rem;
	}

	div {
		margin: 0rem;
	}

	.clear {
		clear: both;
	}

	.page {
		max-width: 960px;
		margin: 0px auto;
	}

	.drop-effect .container {
		margin: 0 0 1% 0;
	}

	.reset-button {
		background: #eee;
		border: solid 1px #ccc;
		padding: 12px 15px;
		display: inline-block;
		cursor: pointer;
		margin-top: 25px;
	}

	/*universal*/

	.drop-effect .drag-zone,
	.drop-effect .drop-zone {
		width: 100%;
		background: #eee;
		border: solid 1px #ccc;
		padding: 5px 0 5px 5px;
	}

	.drop-effect .drag-item,
	.drop-effect .drop-item {
		width: 10%;
		margin: 0% 0.8% 0.8% 0.6%;
		float: left;
		text-align: center;
		overflow: hidden;
	}

	.drop-effect .drag-item .drag,
	.drop-effect .drop-item .drop {
		border: solid 1px #ccc;
		background: #DDD;
		cursor: -webkit-grab;
		cursor: -moz-grab;
		border: solid 1px transparent;
		height: auto;
		width: 100%;
		display: inline-block;
		-webkit-transition: all 300ms ease-in;
		-moz-transition: all 300ms ease-in;
		-o-transition: all 300ms ease-in;
		transition: all 300ms ease-in;
	}

	/*drag related styles*/

	.drop-effect .drag-zone {}

	.drop-effect .drag-zone .drag {}

	.drop-effect .drag-zone .drag.drag-active {
		border: solid 1px #333;
		opacity: 0.7;
	}

	/*drop related styles*/

	.drop-effect .drop-zone {}

	.drop-effect .drop-zone .drop {
		width: 100%;
		height: 0px;
		padding-bottom: 100%;
	}

	.drop-effect .drop-zone .drop.drop-active {
		border: solid 1px #AAA;
	}

	.drop-effect .drop-zone .drop.correct {
		border: solid 1px #32ce74;
	}

	.drop-effect .drop-zone img {
		width: 100%;
		height: auto;
	}

	.ie-message {
		display: none;
		padding: 15px;
		background: #e74c3c;
		color: #fff;
		border: dashed 2px #c0392b;
		margin-bottom: 15px;
	}

	.p {
		padding-top: 100px;
	}
</style>

<body>
	<article class="page">
		<article class="main">
			<h1>Native Drag and Drop – the effectAllowed and the DropEffect properties</h1>
			<h3>Drag the images into the various containers. Depending on which item you drag, you may or may not be able to drop</h3>
			<article class="drop-effect cf">
				<div class="container">

					<div class="drag-zone cf">
						<div class="drag-item">
							<h4 class="clear">Copy</h4>
							<img draggable="true" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/drag_drop_effect_image.jpg" class="drag" data-effect-allowed="copy"
							/>
						</div>
						<div class="drag-item">
							<h4 class="clear">Link</h4>
							<img draggable="true" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/drag_drop_effect_image.jpg" class="drag" data-effect-allowed="link"
							/>
						</div>
						<div class="drag-item">
							<h4 class="clear">Move</h4>
							<img draggable="true" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/drag_drop_effect_image.jpg" class="drag" data-effect-allowed="move"
							/>
						</div>
						<div class="drag-item">
							<h4 class="clear">All</h4>
							<img draggable="true" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/drag_drop_effect_image.jpg" class="drag" data-effect-allowed="all"
							/>
						</div>
						<div class="drag-item">
							<h4 class="clear">None</h4>
							<img draggable="true" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/drag_drop_effect_image.jpg" class="drag" data-effect-allowed="none"
							/>
						</div>
						<div class="drag-item">
							<h4 class="clear">copyLink</h4>
							<img draggable="true" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/drag_drop_effect_image.jpg" class="drag" data-effect-allowed="copyLink"
							/>
						</div>
						<div class="drag-item">
							<h4 class="clear">linkMove</h4>
							<img draggable="true" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/drag_drop_effect_image.jpg" class="drag" data-effect-allowed="linkMove"
							/>
						</div>
						<div class="drag-item">
							<h4 class="clear">copyMove</h4>
							<img draggable="true" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/drag_drop_effect_image.jpg" class="drag" data-effect-allowed="copyMove"
							/>
						</div>
					</div>
				</div>

				<div class="container">
					<div class="drop-zone cf">
						<div class="drop-item">
							<h4 class="clear">Copy</h4>
							<div class="drop" data-drop-effect="copy"></div>
							<p>I accept 'copy'</p>
						</div>
						<div class="drop-item">
							<h4 class="clear">Link</h4>
							<div class="drop" data-drop-effect="link"></div>
							<p>I accept 'link'</p>
						</div>
						<div class="drop-item">
							<h4 class="clear">Move</h4>
							<div class="drop" data-drop-effect="move"></div>
							<p>I accept 'move'</p>
						</div>
						<div class="drop-item">
							<h4 class="clear">None</h4>
							<div class="drop" data-drop-effect="none"></div>
							<p>I accept nothing</p>
						</div>
					</div>
					<div class="reset-button">Reset drag and drop</div>
				</div>

				<p class="p">Demo by Simon Codrington.
					<a href="http://www.sitepoint.com/html5-native-drag-and-drop-api" target="_blank">See article</a>.</p>
			</article>
		</article>
	</article>

	<script>
		// You can also require other files to run in this process
      require('./renderer.js')
	</script>
</body>

</html>

## main.js
// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')


  // Open the DevTools.
  // mainWindow.webContents.openDevTools()

  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

## renderer.js
jQuery(document).ready(function($) {
  var drag_items = $('.drop-effect .drag');
  var drop_items = $('.drop-effect').find('.drop');

  //sets up the drag and drop event listeners
  function setUpEventListeners() {

    drag_items.each(function() {
      var thisDrag = $(this);
      thisDrag[0].addEventListener('dragstart', dragStart);
      thisDrag[0].addEventListener('drag', drag);
      thisDrag[0].addEventListener('dragend', dragEnd);
    });

    drop_items.each(function() {
      var thisDrop = $(this);

      thisDrop[0].addEventListener('dragenter', dragEnter);
      thisDrop[0].addEventListener('dragover', dragOver);
      thisDrop[0].addEventListener('dragleave', dragLeave);
      thisDrop[0].addEventListener('drop', drop);

    });

  }
  setUpEventListeners();

  var dragItem;

  //called as soon as the draggable starts being dragged
  //used to set up data and options
  function dragStart(event) {

    drag = event.target;
    dragItem = event.target;

    //set the effectAllowed for the drag item
    event.dataTransfer.effectAllowed = $(this).attr('data-effect-allowed');

    var imageSrc = $(dragItem).prop('src');
    var imageHTML = $(dragItem).prop('outerHTML');

    //check for IE (it supports only 'text' or 'URL')
    try {
      event.dataTransfer.setData('text/uri-list', imageSrc);
      event.dataTransfer.setData('text/html', imageHTML);
    } catch (e) {
      event.dataTransfer.setData('text', imageSrc);
    }

    $(drag).addClass('drag-active');

  }

  //called as the draggable enters a droppable
  //needs to return false to make droppable area valid
  function dragEnter(event) {

    var drop = this;

    //set the drop effect for this zone
     event.dataTransfer.dropEffect = $(drop).attr('data-drop-effect');
    $(drop).addClass('drop-active');

    event.preventDefault();
    event.stopPropagation();

  }

  //called continually while the draggable is over a droppable
  //needs to return false to make droppable area valid
  function dragOver(event) {
    var drop = this;

    //set the drop effect for this zone
    event.dataTransfer.dropEffect = $(drop).attr('data-drop-effect');
    $(drop).addClass('drop-active');

    event.preventDefault();
    event.stopPropagation();
  }

  //called when the draggable was inside a droppable but then left
  function dragLeave(event) {
    var drop = this;
    $(drop).removeClass('drop-active');
  }

  //called continually as the draggable is dragged
  function drag(event) {}

  //called when the draggable has been released (either on droppable or not)
  //may be called on invalid or valid drop
  function dragEnd(event) {

    var drag = this;
    $(drag).removeClass('drag-active');

  }

  //called when draggable is dropped on droppable
  //final process, used to copy data or update UI on successful drop
  function drop(event) {

    drop = this;
    $(drop).removeClass('drop-active');
    $(drop).addClass('correct');

    event.dataTransfer.dropEffect = $(drop).attr('data-drop-effect');

    var dataList, dataHTML, dataText;

    //collect our data (based on what browser support we have)
    try {
      dataList = event.dataTransfer.getData('text/uri-list');
      dataHTML = event.dataTransfer.getData('text/html');
    } catch (e) {;
      dataText = event.dataTransfer.getData('text');
    }

    //we have access to the HTML
    if (dataHTML) {
      $(drop).empty();
      $(drop).prepend(dataHTML);
    }
    //only have access to text (old browsers + IE)
    else {
      $(drop).empty();
      $(drop).prepend($(dragItem).clone());
    }

    event.preventDefault();
    event.stopPropagation();
  }

  //Reset the drop containers
  $('.reset-button').on('click', function() {
    $('.drop-zone').find('img').remove();
    $('.drop-zone').find('.drop').removeClass('correct');
  });

  var userAgent = window.navigator.userAgent;
  if(userAgent.indexOf('MSIE') != -1){
    $('.ie-message').show();
  }

});
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<title>Hello World!</title>
	<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
	crossorigin="anonymous"></script>
	</head>
	<style>
	/universal styling/

	html {
	font-size: 10px;
	}

	body {
	font-family: Arial, sans-serif;
	font-style: normal;
	font-size: 1.5rem;
	line-height: 1.5rem;
	padding: 0 20px;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
	font-weight: 600;
	line-height: 1.4;
	margin: 1.5rem 0rem;
	}

	h1 {
	font-size: 2.8rem;
	margin: 0;
	}

	h2 {
	font-size: 2.8rem;
	margin: 2.1rem 0rem;
	}

	h3 {
	font-size: 2.1rem;
	margin: 1.57rem 0rem;
	}

	h4 {
	font-size: 1.4rem;
	margin: 0;
	}

	h5 {
	font-size: 1.3rem;
	}

	h6 {
	font-size: 1.0rem;
	}

	p {
	margin: 0rem 0rem 2.4rem 0rem;
	line-height: 150%;
	}

	ul,
	ol {
	margin-left: 25px;
	margin-bottom: 15px;
	line-height: 150%;
	}

	/clearfixes/

	.cf:before,
	.cf:after {
	content: " ";
	display: table;
	}

	.cf:after {
	clear: both;
	}

	*,
	*:before,
	*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

	article,
	aside,
	details,
	figcaption,
	figure,
	footer,
	header,
	hgroup,
	menu,
	nav,
	section,
	div {
	margin: 1.5rem 0rem;
	}

	div {
	margin: 0rem;
	}

	.clear {
	clear: both;
	}

	.page {
	max-width: 960px;
	margin: 0px auto;
	}

	.drop-effect .container {
	margin: 0 0 1% 0;
	}

	.reset-button {
	background: #eee;
	border: solid 1px #ccc;
	padding: 12px 15px;
	display: inline-block;
	cursor: pointer;
	margin-top: 25px;
	}

	/universal/

	.drop-effect .drag-zone,
	.drop-effect .drop-zone {
	width: 100%;
	background: #eee;
	border: solid 1px #ccc;
	padding: 5px 0 5px 5px;
	}

	.drop-effect .drag-item,
	.drop-effect .drop-item {
	width: 10%;
	margin: 0% 0.8% 0.8% 0.6%;
	float: left;
	text-align: center;
	overflow: hidden;
	}

	.drop-effect .drag-item .drag,
	.drop-effect .drop-item .drop {
	border: solid 1px #ccc;
	background: #DDD;
	cursor: -webkit-grab;
	cursor: -moz-grab;
	border: solid 1px transparent;
	height: auto;
	width: 100%;
	display: inline-block;
	-webkit-transition: all 300ms ease-in;
	-moz-transition: all 300ms ease-in;
	-o-transition: all 300ms ease-in;
	transition: all 300ms ease-in;
	}

	/drag related styles/

	.drop-effect .drag-zone {}

	.drop-effect .drag-zone .drag {}

	.drop-effect .drag-zone .drag.drag-active {
	border: solid 1px #333;
	opacity: 0.7;
	}

	/drop related styles/

	.drop-effect .drop-zone {}

	.drop-effect .drop-zone .drop {
	width: 100%;
	height: 0px;
	padding-bottom: 100%;
	}

	.drop-effect .drop-zone .drop.drop-active {
	border: solid 1px #AAA;
	}

	.drop-effect .drop-zone .drop.correct {
	border: solid 1px #32ce74;
	}

	.drop-effect .drop-zone img {
	width: 100%;
	height: auto;
	}

	.ie-message {
	display: none;
	padding: 15px;
	background: #e74c3c;
	color: #fff;
	border: dashed 2px #c0392b;
	margin-bottom: 15px;
	}

	.p {
	padding-top: 100px;
	}
	</style>

	<body>
	<article class="page">
	<article class="main">
	<h1>Native Drag and Drop – the effectAllowed and the DropEffect properties</h1>
	<h3>Drag the images into the various containers. Depending on which item you drag, you may or may not be able to drop</h3>
	<article class="drop-effect cf">
	<div class="container">

	<div class="drag-zone cf">
	<div class="drag-item">
	<h4 class="clear">Copy</h4>
	<img draggable="true" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/drag_drop_effect_image.jpg" class="drag" data-effect-allowed="copy"
	/>
	</div>
	<div class="drag-item">
	<h4 class="clear">Link</h4>
	<img draggable="true" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/drag_drop_effect_image.jpg" class="drag" data-effect-allowed="link"
	/>
	</div>
	<div class="drag-item">
	<h4 class="clear">Move</h4>
	<img draggable="true" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/drag_drop_effect_image.jpg" class="drag" data-effect-allowed="move"
	/>
	</div>
	<div class="drag-item">
	<h4 class="clear">All</h4>
	<img draggable="true" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/drag_drop_effect_image.jpg" class="drag" data-effect-allowed="all"
	/>
	</div>
	<div class="drag-item">
	<h4 class="clear">None</h4>
	<img draggable="true" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/drag_drop_effect_image.jpg" class="drag" data-effect-allowed="none"
	/>
	</div>
	<div class="drag-item">
	<h4 class="clear">copyLink</h4>
	<img draggable="true" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/drag_drop_effect_image.jpg" class="drag" data-effect-allowed="copyLink"
	/>
	</div>
	<div class="drag-item">
	<h4 class="clear">linkMove</h4>
	<img draggable="true" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/drag_drop_effect_image.jpg" class="drag" data-effect-allowed="linkMove"
	/>
	</div>
	<div class="drag-item">
	<h4 class="clear">copyMove</h4>
	<img draggable="true" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/drag_drop_effect_image.jpg" class="drag" data-effect-allowed="copyMove"
	/>
	</div>
	</div>
	</div>

	<div class="container">
	<div class="drop-zone cf">
	<div class="drop-item">
	<h4 class="clear">Copy</h4>
	<div class="drop" data-drop-effect="copy"></div>
	<p>I accept 'copy'</p>
	</div>
	<div class="drop-item">
	<h4 class="clear">Link</h4>
	<div class="drop" data-drop-effect="link"></div>
	<p>I accept 'link'</p>
	</div>
	<div class="drop-item">
	<h4 class="clear">Move</h4>
	<div class="drop" data-drop-effect="move"></div>
	<p>I accept 'move'</p>
	</div>
	<div class="drop-item">
	<h4 class="clear">None</h4>
	<div class="drop" data-drop-effect="none"></div>
	<p>I accept nothing</p>
	</div>
	</div>
	<div class="reset-button">Reset drag and drop</div>
	</div>

	<p class="p">Demo by Simon Codrington.
	<a href="http://www.sitepoint.com/html5-native-drag-and-drop-api" target="_blank">See article</a>.</p>
	</article>
	</article>
	</article>

	<script>
	// You can also require other files to run in this process
	require('./renderer.js')
	</script>
	</body>

	</html>
	// Modules to control application life and create native browser window
	const {app, BrowserWindow} = require('electron')

	// Keep a global reference of the window object, if you don't, the window will
	// be closed automatically when the JavaScript object is garbage collected.
	let mainWindow

	function createWindow () {
	// Create the browser window.
	mainWindow = new BrowserWindow({width: 800, height: 600})

	// and load the index.html of the app.
	mainWindow.loadFile('index.html')


	// Open the DevTools.
	// mainWindow.webContents.openDevTools()

	// Emitted when the window is closed.
	mainWindow.on('closed', function () {
	// Dereference the window object, usually you would store windows
	// in an array if your app supports multi windows, this is the time
	// when you should delete the corresponding element.
	mainWindow = null
	})
	}

	// This method will be called when Electron has finished
	// initialization and is ready to create browser windows.
	// Some APIs can only be used after this event occurs.
	app.on('ready', createWindow)

	// Quit when all windows are closed.
	app.on('window-all-closed', function () {
	// On OS X it is common for applications and their menu bar
	// to stay active until the user quits explicitly with Cmd + Q
	if (process.platform !== 'darwin') {
	app.quit()
	}
	})

	app.on('activate', function () {
	// On OS X it's common to re-create a window in the app when the
	// dock icon is clicked and there are no other windows open.
	if (mainWindow === null) {
	createWindow()
	}
	})

	// In this file you can include the rest of your app's specific main process
	// code. You can also put them in separate files and require them here.
	jQuery(document).ready(function($) {
	var drag_items = $('.drop-effect .drag');
	var drop_items = $('.drop-effect').find('.drop');

	//sets up the drag and drop event listeners
	function setUpEventListeners() {

	drag_items.each(function() {
	var thisDrag = $(this);
	thisDrag[0].addEventListener('dragstart', dragStart);
	thisDrag[0].addEventListener('drag', drag);
	thisDrag[0].addEventListener('dragend', dragEnd);
	});

	drop_items.each(function() {
	var thisDrop = $(this);

	thisDrop[0].addEventListener('dragenter', dragEnter);
	thisDrop[0].addEventListener('dragover', dragOver);
	thisDrop[0].addEventListener('dragleave', dragLeave);
	thisDrop[0].addEventListener('drop', drop);

	});

	}
	setUpEventListeners();

	var dragItem;

	//called as soon as the draggable starts being dragged
	//used to set up data and options
	function dragStart(event) {

	drag = event.target;
	dragItem = event.target;

	//set the effectAllowed for the drag item
	event.dataTransfer.effectAllowed = $(this).attr('data-effect-allowed');

	var imageSrc = $(dragItem).prop('src');
	var imageHTML = $(dragItem).prop('outerHTML');

	//check for IE (it supports only 'text' or 'URL')
	try {
	event.dataTransfer.setData('text/uri-list', imageSrc);
	event.dataTransfer.setData('text/html', imageHTML);
	} catch (e) {
	event.dataTransfer.setData('text', imageSrc);
	}

	$(drag).addClass('drag-active');

	}

	//called as the draggable enters a droppable
	//needs to return false to make droppable area valid
	function dragEnter(event) {

	var drop = this;

	//set the drop effect for this zone
	event.dataTransfer.dropEffect = $(drop).attr('data-drop-effect');
	$(drop).addClass('drop-active');

	event.preventDefault();
	event.stopPropagation();

	}

	//called continually while the draggable is over a droppable
	//needs to return false to make droppable area valid
	function dragOver(event) {
	var drop = this;

	//set the drop effect for this zone
	event.dataTransfer.dropEffect = $(drop).attr('data-drop-effect');
	$(drop).addClass('drop-active');

	event.preventDefault();
	event.stopPropagation();
	}

	//called when the draggable was inside a droppable but then left
	function dragLeave(event) {
	var drop = this;
	$(drop).removeClass('drop-active');
	}

	//called continually as the draggable is dragged
	function drag(event) {}

	//called when the draggable has been released (either on droppable or not)
	//may be called on invalid or valid drop
	function dragEnd(event) {

	var drag = this;
	$(drag).removeClass('drag-active');

	}

	//called when draggable is dropped on droppable
	//final process, used to copy data or update UI on successful drop
	function drop(event) {

	drop = this;
	$(drop).removeClass('drop-active');
	$(drop).addClass('correct');

	event.dataTransfer.dropEffect = $(drop).attr('data-drop-effect');

	var dataList, dataHTML, dataText;

	//collect our data (based on what browser support we have)
	try {
	dataList = event.dataTransfer.getData('text/uri-list');
	dataHTML = event.dataTransfer.getData('text/html');
	} catch (e) {;
	dataText = event.dataTransfer.getData('text');
	}

	//we have access to the HTML
	if (dataHTML) {
	$(drop).empty();
	$(drop).prepend(dataHTML);
	}
	//only have access to text (old browsers + IE)
	else {
	$(drop).empty();
	$(drop).prepend($(dragItem).clone());
	}

	event.preventDefault();
	event.stopPropagation();
	}

	//Reset the drop containers
	$('.reset-button').on('click', function() {
	$('.drop-zone').find('img').remove();
	$('.drop-zone').find('.drop').removeClass('correct');
	});

	var userAgent = window.navigator.userAgent;
	if(userAgent.indexOf('MSIE') != -1){
	$('.ie-message').show();
	}

	});