Draggable: Support for Internet Explorer 11

[pschaub]

Currently the demo page is not working on IE11. Will this library get support for IE11 in the future?

[tsov]

This library will primarily target modern browsers, however there will be a "legacy" bundle which will support IE11 at least. We are planning to have the support in place by the time we release our first stable version.

[ghost]

Is there an ETA for when that might be?

[heyitsjhu]

This may be related. I'm getting the following error in Microsoft Edge:

SCRIPT438: Object doesn't support property or method 'ToString'
draggable.js (1506, 11)

When running the code:

const swappable = new Draggable.Swappable(document.querySelectorAll('.ui-grid-canvas'), {
  draggable: '.ui-grid-row'
});

This code works in Chrome and Safari, but not in Edge.

Is anyone aware of this error and/or if the legacy bundle will resolved this?

[AStoker]

@heyitsjhu, you have the code on that line that's failing? It looks like it's trying to call ToString, but typically that kind of function is camel case like toString...

[heyitsjhu]

Thanks for the quick response @AStoker.

Unfortunately, Edge is only providing me with the line number to the code in draggable, but that line of code is just where the exception is thrown. I've used the same code in Chrome and Safari and had no issues getting everything to work.

I also thought the ToString part was weird but I'm not defining or calling that anywhere in the code that I'm writing (the three lines in my post above). So I search the draggable.js file, but even then nothing showed up in the search. So I'm wondering if it has to do with how Edge is interpreting some of the code? I'm not entirely sure.

Update: I ran the same code in IE11 and it's throwing a similar error, this time for 'assign'

SCRIPT438: Object doesn't support property or method 'assign'
File: draggable.js, Line: 1472, Column: 5

Also, I'm loading the Draggable library via https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.2/lib/draggable.js

[md5]

@heyitsjhu I ran into the same issue you're seeing in IE 11 with Object.assign. I was able to get a basic example with Sortable working by adding babel-polyfill.

[AStoker]

@heyitsjhu, Object.assign is part of the ES6 syntax which isn't supported by IE11, womp womp 😢
You got a reproducible gist we can look at?

[tsov]

Thanks for the bug report 👍 We definitely want to fully support Edge (I _may_ regret this statement 😆 ).

@heyitsjhu Could you state which Edge version you were using? That way I'll try and reproduce, so we can get a fix out for the next beta.

For the IE11 issue with Object.assign, we will change to use spread syntax here, which should get transpiled differently/correctly by babel. This may or may not solve all the IE11 bugs, but IE11 support

I hope that may have answered some more questions. I will keep this issue open until the Edge bugs have been fixed in the next release. Thanks for reporting!

[heyitsjhu]

Thanks all!

Yep, turns out the assign() error was resolved with a babel-polyfill script, so everything works fine on IE11 now.

As for Edge, I think it's worth noting that with the polyfill script, I no longer get an error message running the code. However, I am having issues with the drag and drop functionality via touch. When I touch a table row, it seems to register but then as I drag, the rest of the page scrolls which may be a whole separate issue. _Yay polyfills!_

I'm testing this on Edge 38.14393.0.0. You should be able to reproduce the error without the polyfill. I hope this helps!

And thank you all for building and maintaining this amazing library!

[heyitsjhu]

@AStoker will a jsfiddle link work? http://jsfiddle.net/pjofjg1h/2/

If you open this in Edge, and I'm pretty sure in IE11 too, and then inspect, you should see the error in the console. I hope this helps you guys!

[AStoker]

@heyitsjhu ( @tsov, you might want to know this as well ) , it's breaking on Edge for me based off an iterable error.
When you call document.querySelectorAll('.ui-grid-canvas'), this returns a NodeList. Normally, this should be iterable (even though it's not an array), however, Edge and IE don't support an iterable node list. See below:
Compatibility: https://developer.mozilla.org/en-US/docs/Web/API/NodeList#Browser_compatibility
Bug report: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/5998615/)

Where this comes down to is when we're trying to loop through our containers (which comes from your query selector).

for (const container of this.containers) { //This requires `this.containers` to be iterable
      container.addEventListener('drag:start', this.dragStart, true);
      container.addEventListener('drag:move', this.dragMove, true);
      container.addEventListener('drag:stop', this.dragStop, true);
      container.addEventListener('drag:pressure', this.dragPressure, true);
}

Since this.containers is not iterable, we throw errors and everything breaks. To make it work, containers just needs to be iterable.
That could be done in the source code by using something like Array.from(this.containers) (turns the node list into an array which we can iterate over).
Another approach (until it's fixed in the library) would be to pass in something iterable yourself (like an array).

let iterableContainers = Array.from(document.querySelectorAll('.ui-grid-canvas'));
let swappable = new Draggable.Sortable(iterableContainers, {
    draggable: '.ui-grid-row',
  });

Side note, ES6 doesn't work for IE, so you can use an old way of converting to Arrays like this

Array.prototype.slice.call(document.querySelectorAll('.ui-grid-canvas'));

Hope this helps.

[AStoker]

If a PR would help, I can make one. But it seems pretty trivial to solve (and easy enough to work around until then)

[tsov]

@AStoker thanks for explaining the issue 👍 should help anyone who is currently facing this issue!

We are aware of the NodeList issues in IE, but haven't had the time to address it yet.

If a PR would help, I can make one.

🙏 would be greatly appreciated! You can point to the v1.0.0-beta.3 branch

[AStoker]

@tsov, getting a branch set up to make this fix. There is a failing test for Swappable.

$ jest --config config.json
 PASS  src/Draggable/Sensors/MouseSensor/tests/MouseSensor.test.js
 PASS  src/Draggable/tests/Draggable.test.js
 FAIL  src/Swappable/tests/Swappable.test.js
  ● Swappable › triggers `swappable:swap` event with `swappedElement`

    TypeError: Cannot read property '0' of undefined

      at Object.<anonymous> (src/Swappable/tests/Swappable.test.js:44:55)
          at Promise (<anonymous>)
      at Promise.resolve.then.el (node_modules/p-map/index.js:42:16)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

Test Suites: 1 failed, 2 passed, 3 total
Tests:       1 failed, 1 skipped, 7 passed, 9 total
Snapshots:   0 total
Time:        5.535s
Ran all test suites.

That was from a fresh download. Is that expected? Want to make sure I'm starting from a valid place.

[tsov]

@AStoker thank you for looking into it! I am guessing this is on the v1.0.0-beta.3 branch? Because it's currently failing, I am planning to address the current test failures today.

I did however include a commit for beta.3 that introduces a very simple legacy bundle to use with older Browsers and earlier Edge versions. I was able to get Draggable working in IE11 on beta.3, but haven't tested for IE10 yet.

Here the commit that introduces core-js for index.legacy.js: https://github.com/Shopify/draggable/commit/4b9e8cc2e2812689697ccafc751765c7c83495ee

[AStoker]

@Tsov, did core-js solve the issue with the NodeList? Wouldn't have expected that. If so, no need for me to make a PR and this issue could be closed. Just want to make sure first.

[AStoker]

Actually, just took a look at the beta.3 branch, looks like everything should work in regards to the containers and node lists

https://github.com/Shopify/draggable/blob/4b9e8cc2e2812689697ccafc751765c7c83495ee/src/Draggable/Draggable.js#L78

No need for a PR

[tsov]

We now include a legacy bundle that supports IE11:

import {Draggable} from '@shopify/draggable/lib/draggable.bundle.legacy';

<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.bundle.legacy.js"></script>

Closed via: https://github.com/Shopify/draggable/releases/tag/v1.0.0-beta.3

[Harry-Harrison]

Hate to drag this back up but i think an update has broken IE 11 support maybe? I cant use anything higher than Beta 4. I can use Beta 5 if I also use babel-polyfill, which isnt ideal but i can't get 6 or 7 working no matter what I do.

With Beta 6 I get SCRIPT1010: Expected Identifier - draggable.bundle.legacy.min.js (1,15223)
Withe Beta 7 I get SCRIPT1010: Expected Identifier - draggable.bundle.legacy.min.js (1,15405)

If anyone else lands here, this is how I got around this issue for IE 11

<script>
    if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
        document.write('<script src="//cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"><\/script>');
        document.write('<script src="//cdnjs.cloudflare.com/ajax/libs/draggable/1.0.0-beta.5/draggable.bundle.legacy.min.js"><\/script>');
    } else {
        document.write('<script src="//cdnjs.cloudflare.com/ajax/libs/draggable/1.0.0-beta.7/draggable.bundle.legacy.min.js"><\/script>');
    }
</script>

[AStoker]

@Harry-Harrison, looks like

const f={"sortable:sorted":function({dragEvent:e}){...
____________________________________^^

is your breaking line.
From the source, it's this constant definition: https://github.com/Shopify/draggable/blob/9f54956d24da310f7c002682fd120738096c6a7c/src/Sortable/Sortable.js#L38
which calls this function:
https://github.com/Shopify/draggable/blob/9f54956d24da310f7c002682fd120738096c6a7c/src/Sortable/Sortable.js#L15
Do you have a fiddle that demonstrates this? I can't be certain off the top of my head, but I think it's trying to use an ES6 object definition as the function parameter.

[joemasilotti]

@AStoker, here is a jsFiddle demonstrating the issue in IE 11: https://jsfiddle.net/znm1d8vc/1/embedded/result,css,html,js

Let me know if you need anything else that will help; we are running into the same issue!