Jump to content
GreenSock

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

Draggable and select element

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

Hi,

 

Apparently select elements are ignored in a Draggable object, they are not triggered at all.

 

In the 0.9.0 version of Draggable.js, input fields are now working properly ; so I just added "select" to the _clickableTagExp property (the "check list" allowing a tags, input, button, etc. to be triggered).

 

However it does not seem to be enough. The select element is being triggered, but the dragging sort of sticks to the mouse.

 

Any idea on how to solve this? (Or are you already on it...)

Link to comment
Share on other sites

Already on it :)

 

And yeah, select elements are tricky because some browsers don't dispatch a "mouseup" event after you release! It has been pretty surprising to find so many little "gotchas" in modern browsers that need workarounds. The next release of Draggable should have this workaround in place, and you can get a preview here: http://forums.greensock.com/topic/8339-draggable-on-windows-8-touch/#entry32419. Does that work well for you?

Link to comment
Share on other sites

Yes, on Mac (OS 10.6, don’t have Lion yet) Chrome, FF, Safari, and iPad (iOS7), Android 4.2 (phone), select are working great with Draggable.

On Windows 7 Chrome and FF too.

Good job.

 

I did not yet test on Windows 8.

 

 

On Windows 7 IE 10, the select does not work. But there is a Javascript error (whenever I click), so it might be related:

 

"Unable to get property 'length' of undefined or null reference."

.. on this line of code, 254 :

_isMultiTouching = (_dragCount < e.touches.length);
Link to comment
Share on other sites

  • 3 months later...

I am having some trouble with a Windows 8.1 tablet, using Chrome on the Desktop. Sounds ridiculous to even ASK you to test in this situation!  And furthermore the behavior is really strange; I get the mouse events for the elements inside of my draggable div when I use my stylus, but not my finger. If I remove the draggable they work fine with both the stylus and the finger.

 

But, when I tried on IE 11 in the 'formerly known as Metro' side of Win8.1,  - then the mouse events are in fact picked up with the stylus and my finger.

 

Same with IE 11 on the Desktop for Win8.1.

 

Don't have FF or anything else for testing on this machine (Samsung PC tablet).

 

I have these set to clickable divs, but I have thought of playing around with buttons, a links, etc to see if that makes a difference.

Link to comment
Share on other sites

A few questions:

  1. Are you using the latest Draggable (0.9.9)? http://www.greensock.com/?download=GSAP-JS
  2. Can you create a super simple codepen or jsfiddle that clearly demonstrates the issue so that we can kick the tires and see what's going on? Here's a codepen you can fork if you'd like: http://codepen.io/GreenSock/pen/irzvd
Link to comment
Share on other sites

Hey Jack thanks for the quick reply.

 

http://cdpn.io/wpmge

 

there's a stab at recreating a toolbar kind of thing using draggable - shows the trouble I'm having with getting a click target for those icons.

Link to comment
Share on other sites

sorry this is a bit hacked up as I'm using Dust.js and Backbone for my real one, as well as other SVGs, not sure if I got this right as here I don't get my li clicks at all, whereas in mine I do get them with my stylus.

Link to comment
Share on other sites

I think I've solved this for now- adding hammer.js (touch events library) and listening for a 'tap' event does the trick.

  • Like 1
Link to comment
Share on other sites

Hello mspanish, I tested your example codepen link  ... on a ASUS Windows 8.1 tablet in IE11, Chrome 32, and Firefox 26 and could not replicate the non draggable behavior with my finger and stylus.. both worked as expected.

Link to comment
Share on other sites

Hmmm thanks - maybe something I have tweaked on my own tablet, or related to the Samsung stylus?

 

Draggable working perfect now though - so I haven't done any more troubleshooting. Thanks a lot for looking at that.

Link to comment
Share on other sites

  • 2 weeks later...

mspanish, I saw in your codepen that there was just a typo on your click() selector (missing an "s") which caused those not to work. :)

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