ie11 support

[dalehille]

Hi, is IE11 supported with react-draggable? I couldn't get the demo page to work when using IE11 on a windows 7 vm so I'm not sure if the demo page is just pointing to old code or if this is a general issue with react-draggable.

When dragging I saw "SCRIPT5007: Unable to get property '0' of undefined or null reference File: react-draggable.min.js, Line: 1, Column: 1805"

[STRML]

Could you try this again? The demo was way out of date previously.

[dalehille]

@STRML , thanks for checking. It still looks a bit broken with IE11 (and 10) although I no longer see errors in the javascript console. The only two blocks that can be somewhat dragged are the horizontal and vertical blocks. When dragging those, the blocks will slowly move but they do it in the wrong direction. i.e., the horizontal block only moves vertically and the vertical block only moves horizontally.

[STRML]

Try it now; 0.5.0 is a more major rework and should fix a lot of
problems. It breaks a lot of backcompat though.

On 5/1/15 10:40 AM, Dale Hille wrote:

@STRML https://github.com/STRML , thanks for checking. It still
looks a bit broken with IE11 (and 10) although I no longer see errors
in the javascript console. The only two blocks that can be somewhat
dragged are the horizontal and vertical blocks. When dragging those,
the blocks will slowly move but they do it in the wrong direction.
i.e., the horizontal block only moves vertically and the vertical
block only moves horizontally.

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

[dalehille]

@STRML , no console errors but I can't get any of them to drag

[mweststrate]

Same here, the demo page doesn't work on on Windows 7 + IE 11.0.9600.16428, nor on surface pro + IE 11.0.9600.17728.

The start event seems to be fired, but no further events.

[mweststrate]

Took a short look, issue seems to be caused by the fact that IE 11 is detected as touch device. I think the solution is to attach mouse events and touch events (or choose which events to attach based on the event that triggered the drag start) instead of using either touch or mouse events.

[STRML]

Thanks, that's helpful.
On May 19, 2015 5:49 AM, "Michel Weststrate" [email protected]
wrote:

Took a short look, issue seems to be caused by the fact that IE 11 is
detected as touch device. I think the solution is to attach mouse events
and touch events (or choose which events to attach based on the event that
triggered the drag start) instead of using either touch or mouse events.

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

[mweststrate]

Found a solution or workaround, just adding the following styling seems to fix all the issues. Probably this can be set in the react component itself? The previous mentioned solution (adding both touch and mouse events), fixes the desktop versions of IE 10/11, but not when using actual touch devices. This solution seems to work correctly on all devices:

.react-draggable {
touch-action:none;
}

Also see: https://msdn.microsoft.com/en-us/library/dn433244(v=vs.85).aspx

[STRML]

Interesting! Thanks! If other browsers implement pointer events they will also need this CSS, so I'll add it for all.

[dalehille]

thanks for the fixes, works great now !

[STRML]

:) Glad to hear it.

[mweststrate]

Yes, for us as well!

On Wed, May 20, 2015 at 4:13 PM, Samuel Reed [email protected]
wrote:

:) Glad to hear it.

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

[jake-nz]

This seems to break scrolling in Chrome on Android.
I think it would make sense to only apply it when disabled is false and/or only apply it to handle