Draggable, inertia, resistance, ...

[st3f]

Hi,

I'm trying to make a "harder" Draggable movement. Meaning: if the user swipe very fast I don't want my container to scroll away to Mars. I have this in a class controlling my stuff

 

this.dragg = Draggable.create(this.slidesInner, {
            type:"x",
            inertia:true,
            edgeResistance: 0.8,
            resistance: 0.75,
            duration:{min:0.1, max:0.5},
            snap: { x: this.snapX
            },
            onDrag:this.onUpdate,
            onThrowUpdate:this.onUpdate,
            onDragEnd:this.onDragEnd,
            callbackScope:this
        });

But even changing resistance and duration I see no change. What am I doing wrong?

 

And, more: it would be very nice to pass to the Draggable instance some custom property, like "parent" How can I achieve that ?

 

Thank you

[ZachSaucier]

19 minutes ago, st3f said:

What am I doing wrong?

There's both resistance and dragResistance that you can change. 

 

22 minutes ago, st3f said:

it would be very nice to pass to the Draggable instance some custom property, like "parent" How can I achieve that ?

I'm not sure exactly what you mean. Do you mean drag one thing and affect its parent? If so, you can use trigger

[st3f]

Hi Zach,

about my first question: I'm trying to obtain a more "magnetic" effect for the snap, and I thought the key was using:

duration:{min:0.1, max:0.5},

that I've found somewhere in the documentation, but clearly there is something I don't understand.

 

About my second question, I will explain better another time

Thanks

[ZachSaucier]

Putting a duration inside of the Draggable itself doesn't make sense - the user is in control of where the element is positioned, it doesn't have a duration. You can have a duration inside of the inertia object if you'd like. Something like:

 

this.dragg = Draggable.create(this.slidesInner, {
  type:"x",
  inertia: {
    snap: { x: this.snapX },
    maxDuration: 0.5,
    minDuration: 0.1
  },
  edgeResistance: 0.8,
  resistance: 0.75,
  onDrag:this.onUpdate,
  onThrowUpdate:this.onUpdate,
  onDragEnd:this.onDragEnd,
  callbackScope:this
});

Without a demo it's hard to know what you need.

[st3f]

I've already tried to put minDuration and maxDuration into the inertia object, but that basically produce no inertia.

 

Sorry about the demo, but I can't achieve classes working in my Codepen (maybe I can't use it...)

[ZachSaucier]

5 minutes ago, st3f said:

I can't achieve classes working in my Codepen (maybe I can't use it...)

You could try recreating the same situation from the ground up (i.e. not copying whatever classes and such that you have in your actual project).