Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
GSdaBlessedFist

Trial version of Draggable isn't selecting elements

Recommended Posts

I'm attempting to make an SVG element draggable.  But it doesn't seem to react to the click event.  I've tried substituting another SVG element with the same result.  The element I'm trying to catch is  HTML line 99  :

 id="page1-panel-3-badge"

I've also registered the Draggable:

gsap.registerPlugin(Draggable);

I'm using the following CDN's:

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable3.min.js  (as provided on the site)

and tried this one too:

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/Draggable.min.js

 

Could I have someone take a look at why I can't control these SVG elements with Draggable, please.   I run into this issue at line 86 in the JS:

Draggable.create(badge, {  //<--badge element in HTML line 99
        bounds: document.querySelector("#page1"),
        onClick: function () {
          console.log("clicked");
        },
        onDrag: function () {
          if (this.hitTest("#page1-panel-2-bg")) {
            gsap.to(this.target, {
              duration: 0.6,
              opacity: 0
            });
          }
        }
      });

 

See the Pen xxYwOwK?editors=1011 by GuyShifty (@GuyShifty) on CodePen

Link to comment
Share on other sites

Hello @GSdaBlessedFist

 

You've got things covering up that badge you want to drag, so the mouse-events do not get through.

 

In your demo the .titlePage is sitting on top of everything, and even if that one is out of the way, you've got your #page1-panel-4 still sitting on top of the badge - I just added apointerEvents: 'none' set to show the difference.

 

See the Pen OJQNjzw by akapowl (@akapowl) on CodePen

 

 

Here is what it could look like with all your other code - I just now noticed that I had to click the telephone-button to make the titlePage animate away - you could have mentioned that one ;)

 

Also, I wouldn't see the suggestion of setting the pointer-events to none as the only way - you just have to make sure your badge is not being blocked in any way, so the mouse/touch events actually get through. Good luck with the project - looks interesting :) 

 

See the Pen GRQZvBd by akapowl (@akapowl) on CodePen

 

  • Like 3
Link to comment
Share on other sites

Oh, wow! Thank you for the fix and the explaination.  It gave me insight into how to better rig my vector docs.

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