Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Draggable on Windows 8 touch

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


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



Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?. 




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.