Draggable on Windows 8 touch

[Cyboide 3 Likes (Newbie)]

Hi

Is it possible to know approximately when the draggable utility compatible with windows 8 will be a available?

 

Thanks.

[GreenSock 18,591 Likes (Superhero)]

Could you clarify what you mean? Are you talking about IE 11 running on Windows 8? Or are you talking about a native app? Are you looking at a tablet device? The more info you could provide, the better

[Cyboide 3 Likes (Newbie)]

I was referring to a setup "mouse & touch capable" of a Windows 8 computer.

 

Specifically, I tried it on a laptop with a touch screen, on IE.

When using the mouse (or more precisely the tracking pad), it reacts fine.

But when using my finger directly on the screen, the Draggable did not respond at all, it did not start.

 

I can assume it as to do with MSPointers, and that on such a setup the mousedown is not simulated like most touch-only devices.

[GreenSock 18,591 Likes (Superhero)]

We're working on this now. Stand by...

[GreenSock 18,591 Likes (Superhero)]

Okay, I have good news: I've attached a preview of the upcoming 1.11.0 release of GSAP which includes a bunch of updates to Draggable, one of which is making it work on Windows 8 tablets like the Surface RT. As you pointed out, Microsoft decided to (yet again) go with a non-standard approach to touch events (naming them things like "MSPointerDown" instead of "touchstart" and not providing a changedTouches array, etc.). Please give it a shot and let us know if it works well for you. 

 

Notable improvements to Draggable:

1. Windows 8 touch compatible
2. Rotation is now always degree-based instead of radian-based. (this also applies to the data stored in the undocumented _gsTransform object in case you're tapping into that)
3. There's a new "liveSnap" feature that you can turn on by setting liveSnap:true - that causes any snapping rules to apply during the drag (without liveSnap:true, snapping only applies to the END value(s)). This can be useful if, for example, you want to drag a box that always must fit in a grid or you want to rotate something in 10-degree increments (or whatever). 
4. New "rotation", "endRotation", "maxRotation", and "minRotation" properties (which are identical to "x", "endX", "maxX" and "minX" but named more intuitively). It shouldn't break existing code because x/endX/maxX/minX are still populated in the same way. It just seemed like code would be more readable this way when the Draggable type is "rotation". 
5. You can define the bounds for rotation using an object with "max" and "min" properties. It will also recognize "maxRotation" and "minRotation" if you prefer. Like bounds:{min:-90, max:90} or bounds:{maxRotation:90, minRotation:-90}.
6. There's a new "dragResistance" property (a value between 0 and 1) that controls how much resistance there is during any dragging (not just outside the bounds which is what edgeResistance affects). 
7. "resistance" has been renamed "throwResistance" so that it's more descriptive (now that we have edgeResistance and dragResistance, it seemed like plain "resistance" was just too vague). 
8. There's a new "pointerEvent" property that records the last mouse (or touch) event that affected the Draggable instance. That way, you can access that event's data like target, currentTarget, pageX, pageY, etc. By default, that event is also passed as a parameter to callbacks like onDragStart, onDrag, and onDragEnd.
9. Added startDrag() and stopDrag() methods so that you can manually trigger those, but please note that you MUST pass a mouse (or touch) event as a parameter to those because it's imperative for them to be able to do things like get the pageX and pageY for the mouse/touch position, and preventDefault(), etc. 
10. <a> links, input fields, and buttons are all treated like live elements that should allow click interaction instead of initiating dragging, plus you can manually mark something as "clickable" by adding a data-clickable="true" attribute.
11. A few minor bug fixes.

Enjoy! And again, please let us know if you stumble across anything odd. 

GSAP_1.11.0_rc11.zip

[Cyboide 3 Likes (Newbie)]

OK I’ll come back to you as soon as I tested it...

[Cyboide 3 Likes (Newbie)]

Works great. Good job!

[alicia 1 Likes (Newbie)]

This new version doesn't seem to work for me. Is there any additional code we need to add? I just swapped the Draggable.min.js file out with the new one and the div doesn't drag anymore. It works if I swap back to the older version.

[Rodrigo 5,424 Likes (Superhero)]

Hi and welcome to the Greensock forums.

 

Could you provide a simple example(codepen or fiddle) of the code that's giving you problems?. The issue is just on windows 8 or in every browser you're testing?. 

 

Best,

Rodrigo.

[Carl 11,170 Likes (Superhero)]

Hi Alicia,

 

When trying out the new version posted above, please update ALL gsap files, not just Draggable.min.js

 

If that still doesn't work, please post a very simple example using codepen.io or jsfiddle.

If your issue is not related to touch on Win8 devices, feel free to start a new topic.

 

Thanks, and welcome to the forums.

[alicia 1 Likes (Newbie)]

Hi

 

My drag objects were actually <a> tags, which is why they stopped working. I just realised that in your above post you mentioned that <a> tags are treated differently now so they don't drag. I'll change them do plain <div> tags so that they are draggable.

 

Thanks