Not working on IE 11

[Polm90]

I''ve tried the demo https://lukasoppermann.github.io/html5sortable/index.html on IE11 (on Windows 10 with April Update) and nothing works. But in the console there are no errors.

Any help?

Thank you

[lukasoppermann]

Hey @Polm90 sadly I have no windows machine available to easily debug this and I am pretty short on time. If you can help with figuring out what the problem could be and maybe even how to fix it, that would be great.

Any more info you can provide would be great.

[Polm90]

Unfortunately it's a strange behaviour because the browser gives no errors (or warnings - in console). But when you try to drag items as you do on other browsers, the browser selects/highlights the element (as you select some text) and there is no possibility to drag.

I didn't have time to try to figure out why, but if I'll find anything new I'll keep you update.

[jmartsch]

There are JavaScript errors in the console which I think are a result of using arrow functions, which are not supported in IE. itemSerializer: (item, container) => { item.parent = '[parentNode]' item.node = '[Node]' item.html = item.html.replace('<','&lt;') return item }, ![iexplore_2018-07-21_02-51-01](https://user-images.githubusercontent.com/551551/43030482-eef1cd54-8c90-11e8-9c13-2a5e250c85a1.png)

[lukasoppermann]

Hey, there should not be any arrow functions in the code, as the code is converted which removes those error functions.

[jmartsch]

Please take a look at the source code of the demo page @ https://lukasoppermann.github.io/html5sortable/index.html. In line 74 there is clearly an arrow function. And on line 80 and 85 also.

[lukasoppermann]

🤦‍♂️ I thought you were talking about the actual code of the sortable. Of course you are right here.

I remove them now, so does this fix the errors?

[jmartsch]

The error is gone, but other errors still excist: The object does not support the property or method "entries" This error occurs five times on the page.

And on line 502 you make use of template strings, which are also not supported in IE.

[lukasoppermann]

Hey, could you maybe send a PR? I am out and I also have a Mac so I can't test on IE. That would be great. Thanks

[kretasei]

Unfortunately it's a strange behaviour because the browser gives no errors (or warnings - in console). But when you try to drag items as you do on other browsers, the browser selects/highlights the element (as you select some text) and there is no possibility to drag.

Same as Polm90, there's no error in the console but nothing is happening in IE11.

Internet Explorer version: 11.125.16299.0

[bgspooner]

I'm also having this issue; I would recommend you try what we use for IE testing, they have a free trial. https://www.browserstack.com

[lukasoppermann]

Hey, @bgspooner thanks for the comment. I currently do not have the capacity to investigate this issue. However if you can help providing a solution or even a PR I am happy to merge it.

[petrinecp]

Hi, I've just created an issue #460 where I link a JSBin which demonstrates which polyfills are necessary for html5sortable to work in IE11.

[petrinecp]

So I looked at the API of the polyfill.io service and it turns out that it doesn't include Object.entries and Array.prototype.includes in the default configuration so you need to specify these two polyfills in the query string like so: https://cdn.polyfill.io/v2/polyfill.js?features=default,Object.entries,Array.prototype.includes

See example https://jsbin.com/wivopiyoxu/edit?html,css,js,output

[lukasoppermann]

Awesome would you like to add a comment to the main readme file? That would be great.

[nilsenpaul]

With the above mentioned polyfill it works, until you try to drag anything. Then you get a bunch of errors about stores.values(), on multiple lines. Adding Object.values or Array.prototype.values to the polyfill makes no difference. Did anyone else have this?

[crimson-med]

Is there any news about this? I have added a polyfill for Object.assign and that worked but even using a polyfill for Object.entries I still get the error on IE11

[lukasoppermann]

hey @crimson-med can you paste the errors in here or link to a pastebin file?

[crimson-med]

@lukasoppermann I don't have access to my computer with IE11 right now. Will post over the weekend.

[lukasoppermann]

Great, since I personally don't have access to IE11 at all. Would be great if you can check it out and even better if you can send a PR or propose a solution that fixes it. Cheers

[crimson-med]

I just got on IE11 and this is where I got the issue:

        Object.defineProperty(Store.prototype, "config", {
            /**
             * get the configuration map of a class instance
             * @method config
             * @return {object}
             */
            get: function () {
                // transform Map to object
                var config = {};
                this._config.forEach(function (value, key) {
                    config[key] = value;
                });
                // return object
                return config;
            },
            /**
             * set the configuration of a class instance
             * @method config
             * @param {object} config object of configurations
             */
            set: function (config) {
                if (typeof config !== 'object') {
                    throw new Error('You must provide a valid configuration object to the config setter.');
                }
                // combine config with default
                var mergedConfig = Object.assign({}, config);
                // add config to map
                this._config = new Map(Object.entries(mergedConfig));
            },
            enumerable: true,
            configurable: true
        });

More precisly this line:

 this._config = new Map(Object.entries(mergedConfig));

I can see the get uses foreach but not in the set for some reason.

[lukasoppermann]

Hey @crimson-med did you already try using a polyfill for maps?

[crimson-med]

@lukasoppermann I have tried using the polyfill mentioned in the documentation:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

As well as the mozilla object.entries polyfill:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

[lukasoppermann]

Hey @crimson-med, it seems like the issue is the missing of map in older browsers (pre-es6). See here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

If you don't want to use the mozilla polyfill for map you can look into this: https://www.npmjs.com/package/es6-map

Sadly I will not be able to look into it myself this week. If you make any progress please let me know, as we should add it to the readme (since it is currently missing).

Thanks & have a great week.