Jump to content
GreenSock

Stefdv

Draggable disable enable

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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
  • Thanks 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 5
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

  • 4 years later...

OMG!

 

This question was asked in 2014 and till this day there is no mention in the docs of the fact that Draggable.create() returns an array. Even if you heard it before you would still try to just type myDraggable.enable() after reading the docs. Please update the docs to reflect this clearly everywhere it will be an issue. I wasted so much time on this.

 

Whilst I am ranting: The cursors are not working correctly.

If you allow an element on the draggable to be clicked and then catch the click event, the cursor should only change to say 'dragging' once you have moved the mouse the amount of pixels that constitutes a drag and not a click.

 

Kind Regards

 

Jayson

Link to comment
Share on other sites

Hey Jayson. Sorry about any confusion there, but I'm not quite sure what to make of your comment because it's very, very clear in the docs (at least from my reading) that Draggable.create() returns an Array: 

draggable-array.gif

 

Am I missing something? 

 

As for the cursor, it behaves like that to give the user a clear indication that the element is draggable. If there's a scenario that you don't think is behaving correctly, would you mind providing a minimal demo so we can see what you're talking about in context? 

 

Again, sorry about any confusion. We're certainly open to suggestion on improving the docs. 

  • Like 2
Link to comment
Share on other sites

Interesting...

 

I was saying docs, but I was referring to this page: Draggable Page.

If you scroll down you will clearly see under methods it says 'disable( ) : Draggable', which to me at the time of reading meant it is an 'Object'.

From there it all went wrong. I guess I was basically just very peeved that I forgot that 'create' intuitively returns an array. Then I realized it must surely be gsap's fault for not reminding me at the 'enable' method (hahahahaha).

 

Regarding the cursor:

There will be no minimal demo. I am simply not that interested in having it fixed (I polyfilled it) plus I have bigger problems with draggable right now. I will however offer you this if you really want to have a look at it, because it is wrong and more time should be spent on it in my opinion:

Create div(foo). Create div(bar) inside div(foo).

Make div(foo) draggable.

Set draggable to 'allowEventDefault:true', 'cursor:default', 'activeCursor:dragging' and  'minimumMovement:6'.

Give div(bar) an event that changes its cursor to pointer on mouseenter or mousehover.

Capture the click event on div(bar) directly from the 'onClick' callback in draggable (very convenient).

So now the cursor changes when you hover div(bar) showing you it is a button that can be clicked.

BUT: when you click div(bar) the cursor becomes the dragging cursor immediately on mousedown.

Why is this wrong? Well, because you set draggable to move at least 6 pixels before starting the drag. The cursor changed prematurely! It was a click!

PS: The only way to really let the user know div(foo) is draggable in this case is to set the 'cursor:drag' option in draggable, but this ruins the entire thing because the cursor will now not even change when entering/hovering div(bar) anymore. Draggable seems to ignore 'allowEventDefault:true' for the cursor.

 

Kind Regards

 

Jayson

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