Not working in Windows 8.1 IE11 Metro

[marcojakob]

By the way it's not working on Windows 8.1 IE11 Metro. Some <meta ...> should be added to html for disabling default back/forward on drag?

Reported by Slava Pankov

[marcojakob]

I couldn't reproduce this on my Windows 8.1 IE11 Metro with the mouse. Maybe it is a problem with touch screen? (I don't have a device where I can test this.)

[marcojakob]

Ok, found out that IE10 and IE11 use pointer events for touch screens. Here are some things to read:

• PointerEvent object on MSDN
• StackOverflow: Windows phone 8 touch support
• IE 11 in Windows 8.1 pointer events changes

Like always, IE just makes web development a bit more challenging. I did a fair amount of refactoring to support all those events in structured way. We now have thee (or four) categories of events:

• Touch: touchStart, touchMove, touchEnd, touchCancel
• Mouse: mouseDown, mouseMove, mouseUp
• PointerEvents (IE11): pointerDown, pointerMove, pointerUp, pointerCancel
• PointerEvents (IE10): MSPointerDown, MSPointerMove, MSPointerUp, MSPointerCancel

Important for the IE PointerEvents is also the touch-action CSS property. We must set the touch-actionto none or pan-x or pan-y to indicate which elements will have custom gesture handling.

Hope it works now as I could only test the PointerEvents in IE on my desktop pc but not on a touch screen.

[slavap]

I've tested it again. No luck, the same problem, no drag at all, only standard back/forward behavior. Have you updated demos on http://code.makery.ch/library/dart-drag-and-drop/ ?

[marcojakob]

Yes, the examples should be updated (don't know, but maybe try a refresh if javascript was cached?).

I took some inspiration about how it could be done from Draggabilly, because they had the same issue. Could you try with Draggabilly to see if the same problem exists. If yes, then we'll have to find a different approach.

[slavap]

I've cleared cache, at least I think I did so, because there is no obvious way to do that in IE11. Draggabilly examples are working without any problems.

[marcojakob]

Thank you! I'll have a look at that tomorrow to see what I did different than Draggabilly. I think I'm really close but it's like programming blindfolded without a testing device...

[slavap]

I will help to test, so take your time, thank you!

[marcojakob]

I found Visual Studio Simulator which helps a lot for testing.

[slavap]

By the way, to my surprise Win 8.1 tablet (I have HP Omni 10) is quite good device. It's not as good as iPad Air, but better than iPad2. And I like it better than most Android tablets I've seen. IE11 still have strange UI, but works fast and I'm using it for every day browsing without any major issues. So it worth to spend time to make sure IE11 metro is supported.

[marcojakob]

That was a stupid bug. I think it was just this one dash - and it should work now. At least it did work in the Windows Tablet simulator.

[slavap]

Yes, it's working now. There is a small difference in behavior on desktop Firefox and IE11 Metro though. In Firefox when I drag item to the edge of area, scrollbars appear. In IE11 no scrollbars. It's ok, IE11 even behaves better IMO, so it's just FYI. BUT I also have a bad news. Demo is not working properly in desktop Chromium (ver.36 from Dart 1.5.3 distribution). Drag starts, but with "prohibited" cursor (crossed circle), and drop is not working. I think we have to open new issue for that.

[marcojakob]

Great. Thank you for testing.

Scrollbar behavior is a bit different depending on the browser. The example page contains many iframes that cause the scrollbars to appear quite frequently. In a real application you usually don't do dragging in an iframe so scrollbars will only appear when an element is dragged to the right/bottom borders of the screen. And if you don't want scrollbars you can hide them with CSS overflow: hidden. The dnd library takes care of the top/left borders and ensures that elements can't be dragged out of sight.

Concerning Chromium: I currently don't deploy the .dart file to the examples so Chromium can't find the files it is looking for (see the gh-pages branch) It works when you start the examples locally from the Dart Editor. But there is an issue in Chromium with detecting drags on nested elements. I reported the Chromium issue here because it's something that must be solved in Chromium.

[slavap]

With Chromium it's strange bug, because Draggabilly examples are working just fine. Or you are saying that Chromium cannot fallback to js code if dart is not found?

[marcojakob]

The Dart app directs the browser to the .dart file first. If Dart is not supported, it takes the js version. But in Chromium, because Dart is supported it reports that the file is missing (you can see it if you open the developer tools with F12 in chromium).

So, it's no bug. But of course, if the Dart VM would be integrated into Chrome, then we should also deploy the .dart files

[slavap]

I was under impression if dart file is not found it will use js version anyway. Wrong behavior, may be it should be reported to Dart team :-(

[marcojakob]

I don't know what their idea is. The reason it doesn't work is the following line in dart.js file:

if (navigator.userAgent.indexOf('(Dart)') === -1) {
  // replace dart files with js
}

The first line will return true in Chromium, so the Dart files don't get replaced. If you find a reason for that somewhere let me know.

[slavap]

Definitely it should be reported, I don't see any good reason for such behavior, looks like poorly/quick written code.