javascript dragleave event

dragleave fired when hovering a child element

by pdistasio

HTML

<div id="droppable">
	<div id="overlay"></div>
	<a href="">test child 1</a>
	<br /><br />
	<button>test child 2</button>
	<br /><br />
	<button>test child 3</button>
	<br />
</div>
<p id="draggable" draggable="true">This element is draggable.</p>

CSS

#draggable{
	padding:5px;
	background: #fec;
	display: inline-block;
}
#droppable{
	width: 300px;
	background: #eef;
	border: 1px solid #ccd;
	position: relative;
	text-align: center;
	padding:30px;
}
#droppable.dropped{
	background: #fee;
}
#overlay.dragover{
	content:"";
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,.1);
	border:3px dashed #999;
}

JavaScript

var dropElem = document.getElementById('droppable');
var overlayElem = document.getElementById('overlay');

overlayElem.addEventListener('drop', function(ev) {
	ev.preventDefault();
	console.log('drop', ev.dataTransfer.files)
	overlayElem.classList.remove('dragover')
	dropElem.classList.add('dropped')
	console.log('drop')
}, false);

overlayElem.addEventListener('dragover', function(ev) {
	ev.preventDefault();
}, false);

overlayElem.addEventListener('dragleave', function(ev) {
	console.log('dragleave')
	overlayElem.classList.remove('dragover')
}, false);

dropElem.addEventListener('dragenter', function(ev) {
	console.log('dragenter')
	overlayElem.classList.add('dragover')
}, false);