[edgeResistance for Draggable + ThrowProps]

Vote for overshootTolerance in the docs. Needed it today for work

[Animating with "className". Added class removes other classes that contains the prefix]

Great thanks for the quick reply! The latest-beta.js works as aspected, using it now

 

 

Many thanks!

[Animating with "className". Added class removes other classes that contains the prefix]

Hi!

 

Think I found a bug of some sort that if I add a class name using TweenMax and my tweening object has already a classname that contains the same word it removes.

 

Example:

 

Want to add a class by name: "hover"

My div has classes: <div class="btn animate-hover color-green">My Button</div>

 

The result will be: <div class="btn animate- color-green hover">My Button</div>

 

It shouldnt behave like that am I right?

 

If using underscore it works: <div class="btn animate_hover color-green hover">My Button</div>

 

 

Possible to solve this?

 

 

Many thanks!

 

 

See the Pen bpMNqL by anon (@anon) on CodePen

[Change DOM structure of draggable element while dragging cause element jump]

Thanks for both answers!

I went for Diaco's advise.

 

Really appreciate this!

 

Many thanks!

[Change DOM structure of draggable element while dragging cause element jump]

Hi!

 

Im building a thing where I drag a element and check with hitTest for another element. I need to change the DOM structure so the dragger element gets inside ".drop-here" element as soon the hitTest is true. It works fine but the draggable elements gets jumpy when dragging to the ".drop-here" area.

 

I need to reset/update the coordinates I guess but dont now how. I tried using draggable.update() with no success. Any suggestion to solve this problem?

 

Many thanks!

See the Pen mJNRoG by anon (@anon) on CodePen

[Children DOM elements of draggable mouse events not firing on explorer 10, 11.]

Wow! Thanks for your help. It works!

[Children DOM elements of draggable mouse events not firing on explorer 10, 11.]

Hi!

 

I have a box that can be dragged and I binded some custom mouse events directly to the DOM element. The events are triggered as they should on every browser besides explorer 10 and 11.

 

Here is another codepen from another forum post. Try to rotate the object in explorer 10, 11. Doesn't work but explorer 9 and other browsers it works just fine.

See the Pen LVZZeG by MAW (@MAW) on CodePen

 

Can you reproduce the same issue?

 

Thanks!

 

 

See the Pen vOKdmM by anon (@anon) on CodePen

[Latest draggable build (0.13.0) with defined type and touch devices bug. Worked in old Draggable build (0.11.0)]

Im so impressed that you guys answer so quickly. I really appreciate it

It works now thanks alot!

 

I didnt find the allowNativeTouchScrolling in the documentation. Im looking here: http://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable

Am I looking at the wrong place? I dont want to miss any useful functions and properties!

 

Thanks alot Diaco.AW!

[Latest draggable build (0.13.0) with defined type and touch devices bug. Worked in old Draggable build (0.11.0)]

Hi!

 

Look at these links using a touch device. Im using iphone 4s with safari browser. 

 

The problem was working fine in the old draggable build. If I have a draggable object with only type:'x'. I can activate the drag if I move my finger in a vertical direction and then move it to a horizontal direction. But with the latest draggable build it doesnt work. It only activates a drag if the touch is a horizontal direction from the start and I tried with lockAxis:false with no success.

 

Old draggable library (0.11.0):

New draggable library (0.13.0):

See the Pen RNOzap by anon (@anon) on CodePen

 

Can you get the same problem?

 

Thanks!

See the Pen bNJPVv by anon (@anon) on CodePen

[When calling Draggable.enable() it stops throw animation]

Works like a charm! Thanks for the superfast answer!

[When calling Draggable.enable() it stops throw animation]

Hi!

 

I have noticed that if I have a draggable element with throwProps:true and throwing it will stop animate if I call the enable() function while the throw animation is still active. What im trying to do is that I have nested draggables that needs to call disable and enable at a specific time and dont want to break the animation if its still going.

 

I looked at the Draggable.js source code and in line 1718 does the animation to stop.

TweenLite.set(target, {x:"+=0"}); //simply ensures that there's a _gsTransform on the element.

I wanted to let you now what I found and maybe its better that you guys does the change in source code if you think this is something to change. The disable() function works as i should.

 

Thanks!

[Draggable. Custom startDrag(). Cant get it work for touch devices]

SUPERB! It works!

ev.originalEvent nailed it!

 

Thanks for your help! Really appreciate it!

[Draggable. Custom startDrag(). Cant get it work for touch devices]

Nope it didnt work. I have that code for disabling the built in scrollers. I have forked a new one with much less code. As you can see it works for computers but not for ipads and iphones.

 

See the Pen EaWozL by anon (@anon) on CodePen

 

Can you reproduce this?

[Draggable. Custom startDrag(). Cant get it work for touch devices]

Hi!

 

I am building a global velocity tracker that runs as soon as you move your mouse or touch. Im using the Draggable plugin where I call the startDrag method in a mousemove touchmove jquery callback and passing the corresponding event to the startDrag method. Everything is working fine on a computer but when using a touch device it doesnt work. Like if the startDrag never is called. Can you see if I have missed something...

 

I have tested with ipad air 2, ipad air mini, iphone 4s all with ios 8.1 and its not working.

 

Check out the codepen.

 

Thanks for this great library!!

//Robert

See the Pen wBJrLp by anon (@anon) on CodePen

[Draggable get throwProps in one go instead of separated calling functions]

Hi!

 

Have a slightly problem to deal with regarding the plugin Draggable and throwprops ON.

 

I have some images that I can throw and want the image im throwing should stick to the most accurate position of another image based on x and y positions.

 

Is there a way that I can run the snap function for getting the x, y properties as a singel function of the throwing object instead of calling x and y properties separated?

So I can match the throwing object to all the images x & y positions in one function instead of calling it twice.

 

Want to do something like this:
 

Draggable.create('.image',
{
  bounds:'.container',
  type:'x, y',
  edgeResistance:0.65,
  throwProps:true,
  snap:function(x, y)
  {
    var pos = get_closest_image_pos(); // returns array [x:Number, y:Number]
    return pos;
  }
});

Instead of this:

Draggable.create('.image',
{
  bounds:'.container',
  type:'x, y',
  edgeResistance:0.65,
  throwProps:true,
  snap:
  {
    x: function(endValue) {
      return get_closest_image_pos_x(endValue);
  },
  
    y: function(endValue) {
      return get_closest_image_pos_y(endValue);
  }
});

Or is there another way?

 

 

Many thanks for the Greensock library! Pure GOLD!!

 

 

[Draggable with snap, when throwing and click again, jumps to end position]

Hello!

 

I tried the attached file and it works perfecto!  Im honored that I could help you guys with this great library to be even better!  

 

Keep up the awesome work you do and looking forward for the new release!

 

Cheers

//Robert

[Multitasking Gestures on Ipads and draggable object]

Hi!

 

I tried and it works like a charm! Really appreciate the quick response and for the update!

 

Keep up the awesome work you guys do!

 

Cheers

//Robert

[Draggable with snap, when throwing and click again, jumps to end position]

Solved it!

I had to check to see if the object was moving and then return the current x position in the snap function.

 

Hope this helps people for creating the slickest slider menu for webapps

var preventSnap = false;

Draggable.create('#top_header',

{

trigger:'.hit',

type:'x',

edgeResistance:1,

throwProps:true,

bounds:'.container',

snap:

{

        x: function(endValue)

        {

        if(preventSnap)

        return this.x;

       

        if(endValue > this.maxX / 2)

        {

        $('#top_header .hit').data('isOpen', true);

        return this.maxX;

        }

        else

        {

        $('#top_header .hit').data('isOpen', false);

        return 0;

        }

        }

},

    onDragEnd:function() { preventSnap = true; },

    onDrag:function() { preventSnap = false; },

onClick:onClickHandler, //Here you call the function to open or close the menu with just a click.

onThrowComplete:function(){ preventSnap = false; }

});

[Draggable with snap, when throwing and click again, jumps to end position]

Hello!

 

Has anyone noticed when using Draggable with throwProps:true, with restricted bounds AND with snap that if throwing the object and try to catch it before it reaches its destination it directly jumps to calculating end position. It should just freeze the object when the user click on it when it still in motion. Like when you are not using the snap.

 

Im creating a webapp with a navigation that I can throw Like the facebook app.

 

Try with the examples http://www.greensock.com/draggable/ the first one "Throw" with the setting  "Snap to grid" checked. You will see what happens. 

 

Any thoughts or solution?

 

Thanks

//Robert

[Multitasking Gestures on Ipads and draggable object]

Hello again!

 

Try that and it didnt work....

 

I have investigated a little and the effect happens even when a alert(); shows when calling the onDragStart event. Like this:

 

Draggable.create('.hit', { type:'x', onDragStart:function(){ alert("!"); }});

 

After that alert, no button is working that is a Draggable object.

 

 

So I tried to see if safari is capturing some kind of event when the user does Multitasking Gestures outside the safari browser. And It does, the touchcancel event 

 

So running this code will scream "Touch Cancel"

 

Draggable.create('.hit', { type:'x', onDragStart:function(){ alert("!"); }});

 

$('.hit').on('touchcancel', function(e){

    alert("Touch Cancel");

});

 

 

So, there are two options here.

1. That Draggable will call the same function for the "touchend" event when "touchcancel" happens. Is this possible?

2. In my code above when the "touchcancel" event happens. Somehow remove the Draggable object of ".hit". Like reseting. and create the instance again. Cant find any function on removing the Draggable object. Any suggestions?

 

And yes I tried invoking the $('.hit').trigger("touchend"); Didnt work...

[Multitasking Gestures on Ipads and draggable object]

So there are no way to go around this? Like calling .trigger("touchend") or something like that?

 

 

 

Great work you guys with the whole greensock library I must say!!