Jump to content
GreenSock

Stefdv

Draggable disable enable

Recommended Posts

Hey there,

 

I really like the new draggable thingy, but...

 

i can't figure out the right syntax to enable / disable certain draggable items..

 

Draggable.disable( $('#myWindow') ) doesn't really work ;)

 

Link to comment
Share on other sites

Hello Stefdv, Welcome to the GreenSock Forums!

 

Have you looked at the Draggable Docs?

 

http://api.greensock.com/js/com/greensock/utils/Draggable.html

 

enable()

http://api.greensock.com/js/com/greensock/utils/Draggable.html#enable()

 

disable()

http://api.greensock.com/js/com/greensock/utils/Draggable.html#disable()

 

You basically chain the instance of Draggable .. in this case my variable instance name is myDraggable .. then use disable or enable as shown below:

 

Forked and edited example from GreenSock:

See the Pen vfEFB by jonathan (@jonathan) on CodePen

var myDraggable = Draggable.create("#dragme", {
        type:"x,y",
	bounds:"#container",
	edgeResistance:0.5,
	throwProps:true
});

// disable draggable instance
myDraggable[0].disable();


// enable draggable instance
myDraggable[0].enable();

does that help? :)

 

edit: draggable create() returning array, thanks Cyboide

  • Like 1
Link to comment
Share on other sites

Live is so simple sometimes... :oops:

tx a lot

  • Like 2
Link to comment
Share on other sites

In the above example it should be:

// disable draggable instance
myDraggable[0].disable();


// enable draggable instance
myDraggable[0].enable();

Because Draggable.create() returns an Array, not the Draggable itself. Right?

But I wish it would...

Link to comment
Share on other sites

You could also use get(), like:

Draggable.get("#dragme").disable();
Draggable.get("#dragme").enable();
  • Like 2
Link to comment
Share on other sites

  • 3 months later...

The issue I'm facing with Draggable.disable(); is that often I want to use it with ThrowPropsPlugin and disable just the dragging part whilst the object is being thrown (FYI the onThrowUpdate is telling other elements to move too).

 

However when I call Draggable.disable(); on onDragEnd it seems to prevent the ThrowProps onThrowUpdate from firing which isn't what I'm after.

 

Any ideas on how to simply prevent the element from being draggable whilst maintaining ThrowProp's onThrowUpdate?

 

Currently I'm having do pointerEvents:'none'; on onDragEnd which causes the infamous jank :/

Link to comment
Share on other sites

Yep, part of the disable() call kills the tweens, but I think it'd make more sense to move that code to the kill() method instead. Agreed? I have attached a preview of Draggable with that change in place - does that work better for you? 

 

Thanks for pointing this out, Chris. 

Draggable_0.10.3_preview2.zip

  • Like 3
Link to comment
Share on other sites

Sweet Jack thanks. I'll give that a whirl. Could be a lifesaver!

Link to comment
Share on other sites

Hmm initial tests with this Draggable version are showing more jank than using pointerEvents:none;

Link to comment
Share on other sites

  • 11 months later...
After I've moved a draggable and onThrowComplete is fired, I call this.disable() and it works as expected.  However, the just-momemnts-ago draggable element's css still has:

 

transform: translate3d(0px, 0px, 0px);

z-index: 1001;

 

Is there a way to clear these?  Note: on onThrowComplete, I am setting up a new layout which the thrown elements are re-positioned and therefore do not need the transform.
Link to comment
Share on other sites

Hi erikb :)

 

pls add this in your onThrowComplete Fn : 

TweenLite.set(this.target,{clearProps:"x,y,zIndex"});
  • Like 2
Link to comment
Share on other sites

  • 5 months later...

Hi, I'm facing the same problem now in that calling 'disable' onThrowEnd is not allowing the throwProps to work. I'm using a later version than 0.10 though, I'm on 0.13 - is there a new way to stop this problem in the latest code?

 

Thanks

Dan

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