Jump to content
Search Community

Disable drag, but not click

Guest GRDC
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

One though I had was to create two draggable objects on the same element.  However, the second draggable evidently overwrote the first bound to the object I wish to allow only click events on temporarily.

Link to comment
Share on other sites

Hello reanimator, and Welcome to the GreenSock Forum!

 

Have you tried looking at the Draggable Docs?

 

Here are some helpful links to methods in the Draggable docs for:

 

disable() drag: http://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/disable/

enable() drag: http://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/enable/

 

Regarding the click .. so this way we can see this in context, can you provide a code example so we can see what you have tried and what isn't working.

 

Here is a video tut on how to create a code example in codepen.

 

This way we can see your code in a live editable environment to better help you!

 

Thanks! :)

  • Like 2
Link to comment
Share on other sites

Hi

 

Are you saying that you don't want the object but you still want its onClick callback to function?

Currently, disable() will remove all Draggable-related functionality and callbacks.

So once you call disable(), the onClick goes away.

 

This demo shows 2 elements that are created as Draggables the same way, with the same onClick callback.

http://codepen.io/GreenSock/pen/ByVJXa?editors=101

The  element on the right is disabled and no longer clickable.

However, after the Draggable is disabled, I then give its target the same onclick function

 

//disable the one on the right
draggables[1].disable();
//make it clickable
draggables[1].target.onclick = draggables[1].vars.onClick

A down side here is that when onClick is called indirectly from the disabled Draggable you lose scope.

So any reference to this inside onClick will be lost or mangled.

 

Watch the console logs when clicking on either div

 

onClick:function(){
      alert("you clicked me")
      console.log(this)
    }
  • Like 2
Link to comment
Share on other sites

Hi Reanimator,

 

Here's how to do this while maintaining your draggable's scope and params. You need to call your onClick function using apply, passing in your params array or the event object wrapped in an array.

function onClick(myParam) {
  // Do something to my draggable
}

function disabledClick(event) {
  onClick.apply(myDraggable, myDraggable.vars.onClickParams || [event]);
}

See the Pen bNKLVE by osublake (@osublake) on CodePen

  • Like 4
Link to comment
Share on other sites

Hi folks, my first writing on this forum. First may I say that I seldom saw a forum with the vivid and high quality threads as this one? Great members!

 

About this issue: I don't understand the code of the solution of OSUblake. Some thorough comments will make me happier guy.

Link to comment
Share on other sites

Hi OSUblake,

 

I realized my lack of understanding your code is because of a lack of a more detailed knowledge of javascript. I'm used to read all these gsap code pens mainly as tutorials. I forgot to see that most of these pens aren't meant to be educational. 

Link to comment
Share on other sites

Good replies all.  I first went with the simple swap, but came to realize that I needed to use apply() to prevent default behaviors of the event.

 

In the original onClick function, I was referencing variables which were local to the method which created the draggable object.  How can I pass variables into the onClick function from the draggable object.  Maybe something like this:?

 

},

onClick: defaultClick(varHere) ??

 

:EDIT:

Noticed the onClickParams is a piece of the framework, and passed in the locally scoped variable through that method.

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