Jump to content


Get Draggable

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'm trying to detect the x position of a dragable object using scrollLeft.


using the onDrag:updateDrag I can detect a this.x and set a variable to use it outside of this function but what I can't do is detect the x position of an item that hasn't yet been dragged.


I thought I could use the  var drag = Draggable.get("#container"); and then use drag.x but this returns undefined? So I'm guessing I'm not using this correctly.


Is there a way to return the x value before an element had been physically dragged?

Link to comment
Share on other sites

We're close to releasing a major update to Draggable that will populate the x/y properties upon instantiation (and add a bunch of other features). You can read a bit more about the changes here: http://forums.greensock.com/topic/8339-draggable-on-windows-8-touch/#entry32419. We're hoping to post the update within the next 2 days, but in the mean time, please feel free to hammer away on that preview set of files and let us know if things work well for you. 

Link to comment
Share on other sites

Sounds good. I'm trying to tie the draggable object into the track pad on apple mouse and scrollLeft is giving me jerky results so hoping this will sort it.

Link to comment
Share on other sites

As always a great job! but ...


With previous versions could drag <a> lists with this latest version is no longer possible .... no way to configure <a> elements can be used to drag?


thank you!

Link to comment
Share on other sites

I have seen the property "dragClickables" is possible that, in desktop works correctly, but the phone does not work <a> clicks ... : (

Link to comment
Share on other sites

So you set dragClickables:true in your vars object and you're using the latest 0.9.1 version and it doesn't work on the mobile device you're looking at? Is that correct? 


Also, have you tried adding a data-clickable="false" attribute to your <a> element?


Can you post a very simple example codepen or jsfiddle or something that demonstrates the issue and tell us what device you're testing it on? 

Link to comment
Share on other sites

Thank you!


Yes, it works.


But when dragClickables: true in mobile devices living elements dont have interactivity, for example, a textfield does not focus.

Link to comment
Share on other sites



I'm also trying to get the current x and y coordinates of an element, although while they are in motion (as they are being dragged) or "live". 


I'm using:

function draggedAnimalObserver(identifier){
    var draggable = Draggable.get("#fig" + identifier);
    var animalTopPosition = draggable.y;

Also used update() but all I get is the position after re-touching element (releasing and touching again pops out value).


How can I get the live position data or at least get the values after releasing without need of touching again ?


Your help will be appreciated.

Link to comment
Share on other sites

First of all, let me address the whole "clickable" thing...


You cannot have BOTH behaviors because they are mutually exclusive - when you press on an element (like an <input>), Draggable must either preventDefault() on the event so that the browser doesn't apply its normal behavior to that click (focusing the <input>, putting the cursor there and waiting for input) OR we don't call preventDefault() and allow the default behavior. In other words, the click must be interpreted as either initiating drag or initiating interaction with the <input> (or <select> or whatever). 


This is even more critical for <a> links because normally the click would cause the browser to navigate to a new URL, but if you want it to be draggable, obviously you wouldn't want it to treat that <a> in the "normal" fashion. See the dilemma? 




As for getting the "y" position live during the drag, yes, that's absolutely supported. I wonder if you're simply not calling your draggedAnimalObserver() function until the end of the drag. Here's the simplest way to report the x/y live during the drag: 

Draggable.create("#yourID", {
    onDrag:function() {
        console.log("x: " + this.x + ", y: "+ this.y);

If you're still having trouble, please post a simple codepen or jsfiddle that demonstrates the issue so we can take a peek. I'm pretty sure you're just not calling your function at the appropriate time (like maybe you used onDragEnd instead of onDrag). 

  • Like 1
Link to comment
Share on other sites

Thank you so much Jack, corrected it and works! You're right I was making the call at the end! (it was late, last night).


Keep up with the good work!


Thanks again!

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