Trial version of Draggable isn't selecting elements

[GSdaBlessedFist 3 Likes (Newbie)]

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

[akapowl 4,625 Likes (Superhero)]

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

 

[GSdaBlessedFist 3 Likes (Newbie)]

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