Get Draggable

[savvi]

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?

[GreenSock]

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. 

[savvi]

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.

[jjavierfg]

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!

[jjavierfg]

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

[GreenSock]

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? 

[jjavierfg]

Thank you!

 

Yes, it works.

 

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

[Brickyenne]

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.

[GreenSock]

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

[Brickyenne]

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!