Jump to content
Search Community

Draggable on Windows 8 touch

Cyboide test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Link to comment
Share on other sites

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. 


  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites



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.



  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...