Dragging and resizing is not working on IE11

[alanrubin]

First thanks for the great library !

Currently dragging and resizing is not working in M$ IE11 (running on a Windows 7 VM). You can easily reproduce by trying to run the showcase demo in IE11 - https://strml.github.io/react-grid-layout/examples/0-showcase.html .

The problem seems to rely on react-draggable component and the way it detects if the device is a touch one. We found that by modifying draggable.js file (/node_modules/react-grid-layout/node_modules/react-draggable/lib/draggable.js) so that isTouchDevice is always false solve the problem.

So instead of having:

// @credits: http://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript/4819886#4819886
/* Conditional to fix node server side rendering of component */
if (typeof window === 'undefined') {
    // Do Node Stuff
    var isTouchDevice = false;
} else {
    // Do Browser Stuff
    var isTouchDevice = 'ontouchstart' in window || // works on most browsers
      'onmsgesturechange' in window; // works on ie10 on ms surface
}

we do

var isTouchDevice = false;

the problem is fixed.

This seems to be a problem with touch detection in IE11 and probably must be fixed in react-draggable but just want to make sure people are aware of the problem and temporary solution. I will try to investigate the best solution and open an issue for react-draggable.

[browniefed]

I wonder if this can be solved with React.initializeTouchEvents and not worry about checking for this sort of stuff.

[STRML]

That is a good point. Could you forward this on as a react-draggable issue?

[dalehille]

@STRML do you know if the react-draggable issue was ever submitted? I saw you submitted react-grid-layout/react-draggable#33 but I wasn't sure if that was supposed to fix the ie11 issue or something else.

[andrewmclagan]

This still seems to be a problem on 0.9.1 and master

Any progress?

[andrewmclagan]

Awesome! will check it out later today. Very appreciated.

[STRML]

Having some issues with the upgrade due to other changes in react-draggable. Working on it.

[jgwconsulting]

Hi @STRML, at the risk of being deeply annoying, I was wondering if you have a feel for how difficult it will be to solve the IE11 issue? RGL is really good - much better than any of the other Packery style offerings (including Packery itself).

[STRML]

@jgwconsulting I've definitely dropped the ball on this - work is about 80% done but I have to work out some compatibility bugs. My day job has taken up all of my time lately.

I want to use RGL in production (that's what I built this for) so the next release (0.11) is a priority. Hoping to bang it out within the next week.

[jgwconsulting]

I'm amazed you have time to create this as well as holding down a day job, sleeping and stuff like that :) Great news that you're nearly there. I'll swap out Packery for RGL in a heartbeat in a dashboard app I'm working on so you have my sincere gratitude!

[STRML]

Thanks - yeah, issue is that I've been between traveling and presentations as well - so life has been a whirlwind the last few months. My day job is bitmex.com so it's eventually going to make it into that app. I've definitely been slacking on this and I want it to hit production so it'll move forward shortly.

[jgwconsulting]

Yes, I saw your screenshot of Bitmex - that's a nice looking dashboard. It
must be an exciting area to work in too.

I work for part of Avid (they do video, audio, broadcast related stuff),
currently developing a dashboard to monitor all our various services and
Rabbit MQ based workflow. At the moment I'm using something called Golden
Layout for panels and Packery for widget layout within the panels (I do
write some of my own code, honestly!) but RGL is streets ahead.

Anyway, don't kill yourself getting it fixed!
On 27 Aug 2015 23:04, "Samuel Reed" notifications@github.com wrote:

Thanks - yeah, issue is that I've been between traveling and presentations
as well - so life has been a whirlwind the last few months. My day job is
bitmex.com https://www.bitmex.com so it's eventually going to make it
into that app. I've definitely been slacking on this and I want it to hit
production so it'll move forward shortly.

—
Reply to this email directly or view it on GitHub
#29 (comment)
.

[kumarharsh]

@STRML @alanrubin I'd like to update you that the Modernizr test for detecting touchevents is updated to be this:

define(['Modernizr', 'prefixes', 'testStyles'], function(Modernizr, prefixes, testStyles) {
  // Chrome (desktop) used to lie about its support on this, but that has since been rectified: http://crbug.com/36415
  Modernizr.addTest('touchevents', function() {
    var bool;
    if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
      bool = true;
    } else {
      var query = ['@media (', prefixes.join('touch-enabled),('), 'heartz', ')', '{#modernizr{top:9px;position:absolute}}'].join('');
      testStyles(query, function(node) {
        bool = node.offsetTop === 9;
      });
    }
    return bool;
  });
});

[palnes]

Any updates on this? Tried building 0.9.2, but still no go in IE11 it seems.

[jolyonruss]

@STRML d'you have a branch or work in progress fix for this that someone else could pick up and complete? You mentioned that it's 80% done, can we help with the extra 20% and get this working in IE?

[STRML]

This is fixed in 0.10.

[andrewmclagan]

awesome!