Jump to content

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

dragClickables question

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

Hey guys,


Quick question about the new dragClickables option for draggable...


Everything is working as it should, but I want to enable BOTH a click and a drag on an object.


Just imagine I have a slide show, and I want to be able to click on the current image to go to a link AND still be able to drag on the image to go to the next one.



Link to comment
Share on other sites

You could try the onClick configuration option which will trigger if the drag is less than 3 pixels (i.e. a click with a little leeway)

  • Like 3
Link to comment
Share on other sites

Thanks for the reply Jamie,


Sorry my example may of been too simple.

I actually have many objects inside my Draggable Instance.


So just imagine I have 100 squares inside a Draggable instance.

All those squares have onclick events on them. I want to be able to click the squares which fires their onClick event (can achieve this by using dragClickables:false) Now where this breaks down is I still want to be able to touch and drag on the squares themselves to move the Draggable as normal (cannot achieve this while using dragClickables:false).


If set dragClickables:true then I lose my onclick events on my squares. Catch 22!



Link to comment
Share on other sites

Thanks for the solution Jamie!


Works great on desktop, not getting the click events on mobile though, any clue?

Link to comment
Share on other sites

I don't know what mobile is, but the events are definitely getting through on my iPad here (I think codepen was doing something strange with that status box though, which is corrected).


There is however an issue with the logic now. In Firefox I'm seeing the Draggable onClick and then the .clickable click, but on iPad this is happening in the opposite order.


Instead of trying to force an event order, I've added the 3 pixel logic into the click function so it no longer relies on Draggable's onClick happening first to work. Updated codepen.

Link to comment
Share on other sites

Ah yes, I do see the events on iOS and Android (what I call mobile).


Thanks so much for offering up this solution!




I remember in previous versions 9.2 or abouts that this actually worked right out of the box. I assume the implementation of the dragClickables boolean changed the functionality.


Would you ever consider implementing something that allowed you to click AND drag on "links" like Jamie posted? Thanks!

Link to comment
Share on other sites

Hmm I'm not sure how that would be handled - check this response from Jack on why things are usually either always clickable or always draggable.


My example was just a way to work around the fact that if you don't preventDefault on the clickable element, it will still trigger at the end of the drag even if it wasn't really a true 'click'.

Link to comment
Share on other sites

Totally appreciate the work around


Man, that's too bad, I am 100% positive that in version...


 * VERSION: 0.9.0
 * DATE: 2013-09-18


That an object with a click event and "data-clickable", "true" could be both clicked and dragged on.


I only have the .min version of 9.0, wanted to dig though the code and see what allowed both.

Link to comment
Share on other sites

I just did a quick test:

<div class='draggable'>
  <a href='javascript:alert("clicked 1");'>1</a>
  <div onclick='alert("clicked 2");'>2</div>
  <div id='click3'>3</div>

$('#click3').on('click', function() {
  alert("clicked 3");

with 1.11.0_rc3 (Draggable 0.9.0, 2013-09-18). All 3 clickable elements are both clickable and draggable. The alerts are still occurring whether there is a drag or click though. As far as I can tell this isn't different to the behaviour of 1.11.2 (Draggable 0.9.6, 2013-11-2), and would still need the 'true click' detection from the codepen.


If you've got a set of files that exhibits the behaviour you want but doesn't work when using the latest GSAP and Draggable, could you possibly set it up somewhere so we could have a look? It's not something I can manage to reproduce here.


Edit: whoops forgot to test the iPad again: on iPad I can see the following with 0.9.0

- clickable 1 drags without a click, click works on a 'tap'

- clickable 2 drags without a click, click works on a 'tap'

- clickable 3 drags without a click, click does not work on a 'tap'

Still, thats not consistent with results from Firefox or Chrome - the codepen is still probably the best bet for now

Link to comment
Share on other sites

Sure thing... really appreciate your help on this and I really do just want Draggable to be the best possible!


I have the exact same site minus the Draggable versions (0.9.0 and 0.9.6)






NOTE: The draggable is only on iphone/ipad/android


The whole site is a draggable instance..


Scroll down to the IMAGES button, click on that, you can click through the photos at that point.


Notice in 0.9.0 you can click and drag on those two elements. In 0.9.6 you can only drag on them, not click

Link to comment
Share on other sites

  • 4 months later...

Hi guys,


I've got a question about dragClickables. I am using <select> and <input> within a draggable instance, if i do not set dragClickables then they are active and receive focus or open but when i set the variable then nothing works. I have created a code pen for my problem:


See the Pen hjFds by c-andrews (@c-andrews) on CodePen


I can add the onClick to the options of my Draggable instance so that i can trigger the focus or click but then i have issues with the <select>.




Link to comment
Share on other sites

Hello ..


When i remove the onClick function that you reference in Draggable.. then the dragClickables works on the <select> tag. It looks like you were overriding clicks and focus, that were causing conflicts with that custom onElementClick function you had.


Here you can see dragging of <input> and <select> with the draggable working:


I forked your example and edited it:

See the Pen qluir by jonathan (@jonathan) on CodePen


I commented out the onClick function you had referenced that was causing the conflict with Draggables hijacking of the <input> and <select> tags when dragClickables is true.


Draggable Docs


Taken from Draggable docs:


dragClickables : Boolean - By default, Draggable will ignore clicks on <a>, <input> <select>, <button>, and <textarea> elements (as well as any element that has a data-clickable="true" attribute), allowing the browser's default behavior (like clicking on an input would give it focus and drop the cursor there to begin typing), but if you want Draggable to hijack those clicks and initiate dragging instead, set dragClickables:true.


Does that help?

Link to comment
Share on other sites

Hi Jonathan,


Thanks for your response. I am still having trouble with it tho. Can you tell me what browser your using? I can get it to work in Firefox but it doesn't seem to be working in Safari and Chrome. Im on a Mac btw. Not sure if thats going to make any difference.


I am trying to make <a>, <input> <select>, <button>, and <textarea> all draggable but I also would like to keep the default browser behaviour. Is this going to be possible? I am building a PhoneGap app which uses alot of these elements so it makes dragging the page difficult if i set dragClickables to false.



Link to comment
Share on other sites

I tested that on PC Windows 7 (64-bit) and I also tested it on Samsung Galaxy S3 (Android 4.3 Jelly Bean).

Link to comment
Share on other sites



The short answer for this issue is that you can't expand the select options outside the select and for what I see in your code (the commented out code) you've been through a lot of posts in Stackoverflow in this regard.


One option would be to use this library:




I forked your pen using it, perhaps it needs a couple of tweaks regarding the element's overflow so it doesn't looks so hideous.


See the Pen LCIpr by rhernando (@rhernando) on CodePen


Another possibility is create your own drop-down select and pass that value to a hidden input field that later you can use when the user submits the form.



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