Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Notch Interactive

Draggable: Block dragging of specific element inside another draggable element

Recommended Posts

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!

Link to comment
Share on other sites

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 Thank you very much, and thanks for the quick reply! 

 

So does that mean that I just could put in a data-clickable="false"attribute to my html and then it should ignore the elements which are tagged with it? 

 

 

Link to comment
Share on other sites

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 I now inserted 

Draggable.create('.play-button', {
  dragClickables: false
});
with the class I want to have not draggable. but nothing happened. Did I make it wrong? 

Link to comment
Share on other sites

Do you have a demo?

Link to comment
Share on other sites

And what I wanna do it to make the golden/light brown play button not draggable. 

Later a few buttons should follow. 

Link to comment
Share on other sites

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

Update: looks like the draggable docs have already been updated.

 

Gotta love how fast things happen in the GreenSock neighborhood. ;)

  • Like 1
Link to comment
Share on other sites

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 Unfortunately its pretty hard to get all this Webflow Code into a Codepen Post. 

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

Link to comment
Share on other sites

In your codepen you have another code onto your help class:

 

Add Class(es) to <html>

data-clickable="false"

 

Is that maybe related to my problem? cause that I didnt add. 

 

 
Link to comment
Share on other sites

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

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

@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

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

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: 

 

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 2
Link to comment
Share on other sites

Well, there you go. That's why Jack wears the green cape and I just wear on old sweatshirt. ;)

  • Haha 3
Link to comment
Share on other sites

@GreenSock thank you for your answer and thoughts. 

I am a newbie in JavaScript, so what exactly do I need to do with that code? I tried to paste it below my other custom code, but it didnt work with the click. 

Link to comment
Share on other sites

@GreenSock Oh, now I reached the CodePen you send and pasted that code from there. And it works, thank you very much!! :)

Link to comment
Share on other sites

@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

classList.contains() only accepts a single class name. You check those two with an or operator

 

if (e.classList.contains("play-button") || e.classList.contains("primary-link")) {
    return true;
}

 

More info on classList

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

 

Happy tweening.

:)

 

  • Like 2
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.
×