I observed a peculiar behavior while working with drag events in Internet Explorer 11. It seems that adding a 'width' property to the elements triggers the dragLeave event, whereas without it, the event does not fire. Can anyone shed light on why this discrepancy occurs solely due to the inclusion of a width property? This issue seems to be isolated to IE11.
For reference, here are two jsFiddles that showcase the difference based on CSS alone: https://jsfiddle.net/fb5sp5yc/1 and https://jsfiddle.net/f3ap2242/3. Other browsers like Chrome and Firefox behave as expected.
HTML Body:
<div id="d" draggable="true">MoveInMoveOut</div><br>
<div id="s" draggable="true">DragMe</div>
<select id=oResults size=30>
<option>List of Events Fired
</select>
JS Code:
function ShowResults() {
var oNewOption = new Option();
oNewOption.text = event.type + " fired by " + event.srcElement.id;
oResults.add(oNewOption,0);
}
var myDiv = document.getElementById("d");
myDiv.addEventListener('dragenter', ShowResults, false);
myDiv.addEventListener('dragleave', ShowResults, false);
CSS:
#s {
background-color: red;
width: 200px; /*Solely changing this property*/
}
#d {
background-color: yellow;
width: 200px; /*Solely changing this property*/
}