Jump to content
GreenSock

Steve Murray

"click" event on Draggable SVG element still fires after disable() and kill()

Go to solution Solved by GreenSock,

Recommended Posts

Hi all,

 

I'm trying to disable or kill a draggable element within an SVG. After calling disable() on the draggable, the onClick function still fires.

 

Other effects of disabling are as expected: the element can no longer be dragged, the "grab" cursor style is removed, the onDragEnd function no longer fires.

 

Have also tried kill(), with the same results.

 

Here's a minimal example, tested in Chrome and Firefox.

 

<svg version='1.1' xmlns="http://www.w3.org/2000/svg" x='0px' y='0px' viewBox='0 0 200 200'>
	<rect x="0" y="0" width="50" height="50" class="draggable1"></rect>
</svg>
<script type="module">

import { gsap } from 'gsap'
import { Draggable } from "gsap/Draggable";

gsap.registerPlugin(Draggable);

Draggable.create(".draggable1", {
	type:"x,y",
	bounds: "svg",
	onClick: function() {
		console.log("clicked");
	},
	onDragEnd: function() {
		console.log("drag ended");
	}
});

Draggable.get(".draggable1").disable(); // onClick function still fires

</script>

Let me know if you need further info.

 

Cheers

Steve

See the Pen YzvrEeG by stevemurray (@stevemurray) on CodePen

Link to comment
Share on other sites

  • Solution

Sorry about the confusion there, @Steve Murray. That should be resolved in the next release which you can preview at https://assets.codepen.io/16327/Draggable3.min.js

 

You're welcome to use that file or if you want a workaround with the current version, you could call this BEFORE you create your Draggables: 

function clickFix(elements) {
  gsap.utils.toArray(elements).forEach(el => {
    el.addEventListener("click", (e) => {
      let draggable = Draggable.get(el);
      draggable && !draggable.enabled() && e.stopImmediatePropagation();
    }, {capture: true});
  })
}

 

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

 

Does that clear things up? 

  • Like 1
Link to comment
Share on other sites

Thanks for the quick reply Jack.

 

Yes, that clears things up and can confirm your clickfix() function is a workaround.

 

Cheers

Steve

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