Can't work in IE7/8/9 #261

hendiko · 2015-11-17T08:20:33Z

I only tested it in IE7/8/9, it works well in Chrome/Firefox.

Since I had applied es5-shim.js to polyfill functional Array methods, it didn't throw any error anymore but still didn't work.

Is this a bug or I missed something? Help me please, thanks!

bevacqua · 2015-11-17T13:25:52Z

If you could include any repro steps or details about the bug that'd be great.

hendiko · 2015-11-17T14:46:24Z

Here's complete HTML.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <link rel="stylesheet" href="/stylesheets/style.css">
    <script src="/libs/jquery.js"></script>
    <link rel="stylesheet" href="/libs/dragula/dragula.css" type="text/css"/>
<style>
    .box {
        border: black 1px solid;
        float: left;
        width: 300px;
        height: 300px;
        margin-right: 5px;
        padding: 5px;
    }
    .item {
        border: black 1px solid;
        width: 100%;
        min-height: 40px;
        margin: 3px 0;
        background-color: rgba(72, 72, 81, 0.05);
    }
</style>
</head>
<body>

<div>
    <h3>Drag boxes anywhere</h3>
</div>
<div>
    <div><em>It doesn't pass test in IE 7/8/9, even though I have polyfilled functional Array methods.</em></div>

    <div class="box" id='left'>
        <div id="box1" class="item"><span>box1</span></div>
        <div id="box2" class="item"><span>box2</span></div>
        <div id="box3" class="item"><span>box3</span></div>
    </div>
    <div class="box" id='right'>
        <div id="box4" class="item"><span>box4</span></div>
        <div id="box5" class="item"><span>box5</span></div>
        <div id="box6" class="item"><span>box6</span></div>
    </div>

</div>



    <script src="/libs/es5-shim.js"></script>
<script src="/libs/dragula/dragula.js"></script>
<script>
window.onload = function () {
    var drag = dragula([document.getElementById('left'), document.getElementById('right')]);    
    window.drag = drag;
};
</script>
</body>
</html>

It works in IE Edge or IE 10, but it won't work in IE7/8/9, there is no response as if it isn't loaded at all.

bevacqua · 2015-11-17T15:14:18Z

Do you see any errors on the console? There's no need to use onload, that may be causing the issue.

bevacqua · 2015-11-17T15:14:45Z

See #248

philiphendry · 2015-11-17T15:15:16Z

I've also been trying to get this to work in IE9 and there seems to be a problem detecting the mouse button during mousemove. So the order of events is I click a box to drag and grab() fires which calls eventualMovements() to set up the mousemove event listener - specifically startBecauseMouseMoved(). At this point if I move the mouse or simply wait startBecauseMouseMoved() will be called but the e.buttons is 0 and release() is called cancelling the drag.

I wish I new more about the intricacies of mouse events in different browsers but what I have found is if I drop the following code in jsFiddle:

window.addEventListener("mousemove", function(e) { console.log("mousemove. button = " + e.buttons); });
$(document).mousemove(function(e) { console.log("jquery mousemove" + e.which); });

Then I can see in Chrome the button state is detected during mousemove but in IE9 (I'm running IE11 but changing to emulate IE9) there is no button state reported.

Does this help analyse the problem further>

bevacqua · 2015-11-17T15:32:48Z

Please create a separate issue

hendiko · 2015-11-18T02:02:42Z

Nothing appears in console. I tried it again without using onload and it still failed.

hendiko · 2015-11-18T03:55:21Z

Bonjour! Thanks to @philiphendry, I fixed this issue by steps like below:

1. Use es5-shim.js to polyfill methods in IE.

2. Change line 28:

function rmClass (el, className) {
  el.className = el.className.replace(lookupClass(className), ' ').trim();
}

to

function rmClass (el, className) {
  el.className = el.className.replace(lookupClass(className), ' ').replace(/^\s+|\s+$/g, '');
}

It seems that es5-shim.js doesn't polyfill String.prototype.trim even though String.prototype.trim is on their complete tests list.

If you don't polyfill this method, dragula.js won't work in IE7/8.

3. Change line 548 - 549:

function whichMouseButton (e) {
  if (e.touches !== void 0) { return e.touches.length; }
  if (e.buttons !== void 0) { return e.buttons; }
  if (e.which !== void 0) { return e.which; }

to:

function whichMouseButton (e) {
  if (e.touches !== void 0) { return e.touches.length; }
  if (e.which !== void 0 && e.which !== 0) { return e.which; }
  if (e.buttons !== void 0) { return e.buttons; }

I used e.which prior to e.buttons, and MDN says MouseEvent.which is not supported until IE9, but I found it would return 0 instead of undefined in IE7/8.

I've tested the HTML I posted before, and it works well in Chrome, Firefox, Opera, IE7/8/9.

I have IE9 installed in my computer, and I tested in IE7/8 in emulation mode.

I just tested simple actions like drag and drop, I didn't test further APIs provided by dragula, so I don't know if this brings in any unexpected side effects.

bevacqua · 2015-11-18T04:06:25Z

Great.

I'll add a note about String.prototype.trim to the README
I don't think switching e.buttons around to the last place makes any difference
I'm not sure it's as simple as adding && e.which !== 0, as that'd prevent this line from working properly, methinks

Once we sort out the e.which thing we could come up with a PR to fix this thing.

hendiko · 2015-11-18T04:07:54Z

Sorry about 2. Change line 28:.

I made a mistake that I used array.generics.js instead of es5-shim.js when I tested it.

If you use es5-shim.js, just skip 2. Change line 28:.

bevacqua · 2015-12-22T18:14:06Z

@artem-azarov can you confirm the flip is enough without adding !== 0?

artem-azarov · 2016-01-21T10:51:05Z

@bevacqua yes, this fix has solved described issue. Works good in IE9/Chrome/FF

bevacqua · 2016-02-05T19:22:33Z

Fixed in 3.6.6, finally.

bevacqua added the support label Nov 17, 2015

bevacqua closed this as completed Nov 17, 2015

bevacqua reopened this Nov 18, 2015

bevacqua added bug and removed support labels Nov 18, 2015

bevacqua added a commit that referenced this issue Feb 5, 2016

click fixes for #261

9e8159d

bevacqua closed this as completed Feb 5, 2016

jaw4ik pushed a commit to jaw4ik/dragula that referenced this issue Feb 9, 2016

click fixes for bevacqua#261

5680d2a

luckylooke mentioned this issue Aug 30, 2016

Dragging doesn't work in IE9 luckylooke/dragular#107

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can't work in IE7/8/9 #261

Can't work in IE7/8/9 #261

hendiko commented Nov 17, 2015

bevacqua commented Nov 17, 2015

hendiko commented Nov 17, 2015

bevacqua commented Nov 17, 2015

bevacqua commented Nov 17, 2015

philiphendry commented Nov 17, 2015

bevacqua commented Nov 17, 2015

hendiko commented Nov 18, 2015

hendiko commented Nov 18, 2015

bevacqua commented Nov 18, 2015

hendiko commented Nov 18, 2015

bevacqua commented Dec 22, 2015

artem-azarov commented Jan 21, 2016

bevacqua commented Feb 5, 2016

Can't work in IE7/8/9 #261

Can't work in IE7/8/9 #261

Comments

hendiko commented Nov 17, 2015

bevacqua commented Nov 17, 2015

hendiko commented Nov 17, 2015

bevacqua commented Nov 17, 2015

bevacqua commented Nov 17, 2015

philiphendry commented Nov 17, 2015

bevacqua commented Nov 17, 2015

hendiko commented Nov 18, 2015

hendiko commented Nov 18, 2015

1. Use es5-shim.js to polyfill methods in IE.

2. Change line 28:

3. Change line 548 - 549:

bevacqua commented Nov 18, 2015

hendiko commented Nov 18, 2015

bevacqua commented Dec 22, 2015

artem-azarov commented Jan 21, 2016

bevacqua commented Feb 5, 2016