Jump to content
Search Community

Draggable: Block dragging of specific element inside another draggable element

Notch Interactive test

By Notch Interactive
in GSAP

Moderator Tag
 Share

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. 

1
2
Page 1 of 2  

Recommended Posts

Notch Interactive test

Notch Interactive

Posted
Posted

Hi guys

 

I have a horizontal fullscreen draggable slider. When I click and drag the slides get smaller and you can drag through all the different slides.

Now I have the problem, that I wanna put buttons and play-buttons in those slides, but now always when I click on the buttons, the slider starts dragging.

Is there a way to block the dragging on a specific element which is inside another draggable container who should stay draggable?  

 

Thanks a lot for your help!

  • Like 1
Link to comment
Share on other sites
PointC test

PointC

Posted
Posted

Welcome to the forum.

 

It sounds like you'd want to set dragClickables to false. From the docs.

  • dragClickables:  Boolean - By default, Draggable will ignore clicks on <a>, <input> <select>,<button>, and <textarea> elements (as well as any element that has a data-clickable="true"attribute), allowing the browser's default behavior (like clicking on an input would give it focus and drop the cursor there to begin typing), but if you want Draggable to hijack those clicks and initiate dragging instead, set dragClickables:true.

https://greensock.com/docs/Utilities/Draggable

 

Hopefully that helps. Happy tweening.

  • Like 2
Link to comment
Share on other sites
PointC test

PointC

Posted
Posted

You'll want to set dragClickables:false when you create your draggable element.

  

Draggable.create(element, {
  dragClickables: false
});

 

dragClickables used to default to false, but something changed in React so the new default is true since GSAP 2.1.0. I think we'll have to have @GreenSock or @Carl update the docs to mention that. There was also a regression in 2.1.0 that was fixed in 2.1.2 so make sure you're using the latest version of TweenMax and draggable. 

 

Happy tweening.

:)

  • Like 1
Link to comment
Share on other sites
PointC test

PointC

Posted
Posted

It's hard to debug a full site. Simple demos make troubleshooting much easier.

 

That being said, it looks like you're creating a draggable for the whole slider and a draggable for the button that you don't want to drag? You'd want to set dragClickables to false on that parent container. Here's a basic demo.

 

See the Pen ywwxqL by PointC (@PointC) on CodePen

 

  • Like 1
Link to comment
Share on other sites
PointC test

PointC

Posted
Posted

I just meant the docs were updated. 2.1.2 is the latest version.

 

I really can't look through all the code of a live site. I don't know how the whole slider is wired up so there could be other logic that's causing the trouble. If you can create a simplified version of the problem in a demo, we can take a look at it. Here's some info about that:

 

 

  • Like 1
Link to comment
Share on other sites
PointC test

PointC

Posted
Posted

You can ignore that class. I was just doing a quick experiment and forgot to delete it.

 

9 minutes ago, Notch Interactive said:

No way you can help me with the live website I sent you? 

 

Unfortunately we just can't troubleshoot live sites.

 

6 minutes ago, Notch Interactive said:

Unfortunately its pretty hard to get all this Webflow Code into a Codepen Post.

 

We actually don't want all the code in a demo. That's the point of a simplified version. Just enough to reproduce the problem. All you'd need is your slider wrapper, a couple slides (could just be plain divs) and the button. We don't need all the images and copy. If you can make the problem happen in a demo, I'm confident we can point you in the right direction. 

  • Like 2
Link to comment
Share on other sites
Notch Interactive test

Notch Interactive

Posted
  • Author
Posted

Okay I will try to do that when I find time. 

 

What I found out is that when I place the play button outside of the slider, its working as it should. So the problem is that it shouldn't be draggable inside its parent element, the slider which is draggable. so the problem is somewhere in its relation.

Link to comment
Share on other sites
Notch Interactive test

Notch Interactive

Posted
  • Author
Posted

@PointC I tried to grab together only the relevant code. See it here: 

See the Pen GebNVz by cedi44 (@cedi44) on CodePen

Plan is that I wanna make the golden play button clickable, but now the dragging gets started when I click on it. but later a video should start in an overlay. 

 

Does that maybe help you to figure it out? :) 

 

Link to comment
Share on other sites
PointC test

PointC

Posted
Posted

Okay, I see you're using onPress and onRelease instead of onClick. 

 

I did a little test for my own clarification. Using dragClickables: false with an onClick listener works exactly as I would think. However, using onPress and onRelease doesn't behave as I would expect. The child button registers the onPress event, but not the onRelease event. I would have thought the onPress would be ignored as well with dragClickables set to false.

 

See the Pen drBVpW by PointC (@PointC) on CodePen

 

I need to summon the big guns and invite @GreenSock to the thread as I'm not sure if this is the correct behavior or not. If it is correct, I'm not 100% certain of the solution. Stand by.

  • Like 3
Link to comment
Share on other sites
GreenSock test

GreenSock

Posted
Posted
On 3/27/2019 at 3:51 PM, PointC said:

I need to summon the big guns and invite @GreenSock to the thread as I'm not sure if this is the correct behavior or not. If it is correct, I'm not 100% certain of the solution.

 

Yeah, as far as I can tell that's the correct behavior. The onPress fires either way, but then if it's determined to be a clickable object, it essentially ignores things thereafter related to that mouse event (internally it's like "wait! this is a clickable element so don't drag, and there's no need to listen for the release."). 

 

You can define your own logic in a clickableTest function that looks at whatever criteria you want. In this case, I look to see if the object has an ancestor element with the class "play-button" and ignore the press/click in that case: 

See the Pen b50ae06a1dc0460413d78267db9f00b4?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Kinda like (excerpts): 

function isClickable(e) {
    while (e.parentNode) {
        if (e.classList.contains("play-button")) {
            return true;
        }
        e = e.parentNode;
    }
    return false;
}
Draggable.create(... {
    dragClickables: false,
    clickableTest: isClickable
    ...
});

 

Does that help? 

  • Like 3
Link to comment
Share on other sites
Notch Interactive test

Notch Interactive

Posted
  • Author
Posted

@GreenSock Now what if I need the same for another class? 

 

When I add another class to it its not working again ?

  

function isClickable(e) {
    while (e.parentNode) {
        if (e.classList.contains("play-button, primary-link")) {
            return true;
        }
        e = e.parentNode;
    }
    return false;
}

 

Link to comment
Share on other sites
1
2
Page 1 of 2  

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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...