Jump to content
GreenSock

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

Get Draggable

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?

Share this post


Link to post
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. 

Share this post


Link to post
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.

Share this post


Link to post
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!

Share this post


Link to post
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 ... : (

Share this post


Link to post
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? 

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Hello,

 

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;
    console.log(animalTopPosition);
}

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.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×