Jump to content
Search Community

Draggable disable enable

Stefdv test
Moderator Tag

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

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 2
  • Thanks 1
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

  • 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

  • 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

  • 5 months later...
  • 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.
×
×
  • Create New...