0

I was working with drag Events on browsers using 'dragstart', 'dragleave' events. The behavior is very different in Internet Explorer 11 when one just adds a width property. As soon as a width property is specified for the elements, the dragLeave event starts firing and without it, it doesn't. Can someone explain why exactly two different behaviors are observed just because of a width property. This issue is specefically observed in IE11.

Here are two jsFiddles that differ only in their CSS: https://jsfiddle.net/fb5sp5yc/1 https://jsfiddle.net/f3ap2242/3. In other browsers(Chrome, Firefox), everything fires 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; /*Only this property changes*/
}

#d {
    background-color: yellow;
    width: 200px; /*Only this property changes*/
}
1
  • Seems like an IE-specific bug. It works fine in Edge, so I would just specify a width to make it work. Unfortunately that's the nature of IE these days. Even Microsoft has abandoned it for a new browser.
    – Dan Wilson
    Nov 20, 2016 at 14:01

1 Answer 1

0

In Chrome,if the width of s and d is more than the element's width then there will be a default overflow property, but IE it won't happen by default. I tried giving

#oResults{ overflow:visible; }

It worked fine for me, please try including this and test in IE.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.